ピンタレスト風写真ギャラリーを作るという案件があり、サンプルを作ってみました。
やりたかったことは、こんな感じ。
- 画面に写真を敷き詰め、最初に10件表示し、もっと見るボタンを押すと、さらに10件表示させる。
- 読み込む写真とコメントのデータは外部ファイル化
- レスポンシブで見せる
まずはサンプルをご確認ください。
jquery のmasonryというプラグインを使うという方法は有名ですが、いろいろ方法を模索し、angularjsでもできるという事が分かりました。
その一つとして、
「angular-deckgrid」というライブラリを使ってピンタレスト風写真ギャラリーをつくられているサンプルがありました。
http://matagotch.hatenablog.com/entry/2016/02/29/172139
このサンプルはコードも少なく済み素晴らしいと思いましたが、10件づつ表示する事がどうしてもできませんでした。
angularで10件に絞る時は、ng-repeat=”limitTo:hoge”をリピートさせるhtml部分に使うのですが、
どうやら、「angular-deckgrid」とng-repeatの共存ができないらしい。
https://github.com/akoenig/angular-deckgrid/issues/53
そこで、別の方法を模索して、Angular with Masonry Sorting というサンプルを見つけました。
https://jsfiddle.net/g/ntobupj8
この方法だと、自分のやりたいことが実現できそうだと思いました。
アレンジしたところは、
<li ng-repeat="item in items | limitTo: views: 0">
の部分で、10件表示にする指示を追加したところと、
<ul class="grid" masonry="true">
<li ng-repeat="item in items | limitTo: views: 0">
<div><img src="{{item.photo}}"></div>
<p> <a href="http:{{item.url}}" target="_blank"><span>{{item.title}}</span></a></p>
<p><strong>{{item.framework}}</strong></p>
<p><strong>{{item.description}}</strong></p>
</li>
</ul>
jsファイル内で、
10件表示の定義追加と、
もっと見るボタンを押すと、プラス10件を読み込むことです。
$scope.views = 10; // 表示する件数
$scope.nextView = 10; // もっと見るをクリックしたときに表示する数
// ページャークリック時
$scope.moreClick = function () {
$scope.moreCount++;
$scope.views = $scope.views + $scope.nextView;
};
詳しくはサンプルファイルをご確認ください。
imgloader.jsの追加や、コードも少なくすむように、引き続き改良して見たいと思います。