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'; } }
まとめ
angularもポピュラーになったとはいえモジュールの数もまだまだ少なく、信頼性の低いものも多いので選定が悩ましいところです。