簡単!angular + masonry 「もっと見る」で写真を増やすピンタレスト風ギャラリー サンプル

ピンタレスト風写真ギャラリーを作るという案件があり、サンプルを作ってみました。 やりたかったことは、こんな感じ。
  • 画面に写真を敷き詰め、最初に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の追加や、コードも少なくすむように、引き続き改良して見たいと思います。

人気記事ランキング

投稿者:

kishiken

企業務めのWEBデザイナーです。