AngularJSでMasonry「angular-deckgrid」

AngularJSでMasonry
AngularとjQuery Masonryプラグインを組み合わせてサイトをPinterest風のグリッドレイアウトにしていたところ、ページング処理で画像を動的に変更したときにレイアウトが崩れたり、画面がチラついたりする問題に悩まされていました。

「angular-datagrid」ライブラリにしたら問題は解決。コードもきれいにまとまりました。

動作サンプル

動作デモとソースコードはこちら。サンプルデータに「ボケて」人気投稿をつかっています。

See the Pen angular-deckgrid example by matagotch (@matagotch) on CodePen.

サンプルコードの解説、使い方

インストール

自分のプロジェクトで利用するときはbowerでインストールします。

bower install --save angular-deckgrid

htmlでangular-deckgridを読み込みます。

<script src="lib/angular-deckgrid/angular-deckgrid.js"></script>

JS

モジュールをInjectします。

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'akoenig.deckgrid'])

コントローラーでphotosにサンプルデータを入れます。サンプルはsrc: お題の画像 link: 元ページURL title: ボケの配列です。

  $scope.photos = [{
    src: "http://d2dcan0armyq93.cloudfront.net/photo/odai/600/abf9b57d34338cdd95de59fe6903e3fe_600.jpg",
    link: "http://bokete.jp/boke/39978078",
    title: "とぼけんな、給料日だろ"
  }, {
    src: "http://d2dcan0armyq93.cloudfront.net/photo/odai/600/904a534a5dba72ea5eb879182441cd16_600.jpg",
    link: "http://bokete.jp/boke/39979574",
    title: "奈落より　出でよ破壊の"
  }, {

HTML

deckgridディレクティブのsource属性から画像リスト(photos)を読み込みます。小項目はa-cardディレクティブのcard変数からアクセスできます。

<div deckgrid class="deckgrid" source="photos">
  <div class="a-card">
    <a ng-href="{{card.link}}" target="_blank">
      <img src="" data-ng-src="{{card.src}}">
    </a>
    <h2>{{card.title}}</h2>
  </div>
</div>

CSS

ウィンドウサイズによって列数が変わるレスポンシブ表示にしています。ビューエリアが600pxより小さい時は1列、600px以上の時は4列になります。

CSSはREADMEに従って.deckgrid[deckgrid]::beforeにcontentとfont-size visibilityまで設定しないと"No CSS configuration found"エラーが出るので要注意です**。

.deckgrid .column {
  float: left;
}

.deckgrid .column-1-1 {
    width: 100%;
}

.deckgrid .column-1-4 {
    width: 25%;
}

.deckgrid[deckgrid]::before {
  content: '1 .column.column-1-1';
  font-size: 0;
  visibility: hidden;
}

@media screen and (min-width: 600px) {
  .deckgrid[deckgrid]::before {
    content: '4 .column.column-1-4';
  }
}