【jQuery】MasonryとInfinite ScrollでPinterest風の無限スクロールを実装する

WEB 2017.07.10 2017.09.12

jQueryプラグイン「Masonry」と「Infinite Scroll」でPinterestみたいなタイル状のレイアウトを作成します。
高さの異なるボックスをキレイに整列して、下にスクロールしていくと勝手に次のコンテンツが出てくるアレです。

デモあります。

Masonry + Infinite Scroll | MISOBLOG

各プラグインの最新版を使ってみたら、上手く動かなくて結構な時間ハマってしまったので、メモしておきます。

1 MasonryとInfinite Scrollの実装
2 おわり

MasonryとInfinite Scrollの実装

各プラグインのバージョン

2017年7月10日現在の各プラグインの最新バージョンは下記の通りです。

プラグインの読み込み

これらをこんな感じで、jQuery本体の後に読み込みます。


<script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>

「Masonry」と「Infinite Scroll」の他にjQueryプラグイン「ImagesLoaded」というプラグインを併せて読み込む必要があります。
「ImagesLoaded」を使用すると、先にデータを完全に読み込んでから、処理を実行することができます。

HTML


<ul class="grid">
    <li class="grid__item"><img src="images/img1.jpg" alt="" width="300" height="300"></li>
    <li class="grid__item"><img src="images/img3.jpg" alt="" width="300" height="320"></li>
    <li class="grid__item"><img src="images/img2.jpg" alt="" width="300" height="360"></li>
</ul>
<div class="page-load-status">
    <p class="infinite-scroll-request">
        <i class="fa fa-spinner fa-spin"></i>Loading...
    </p>
    <p class="infinite-scroll-last">End of content</p>
    <p class="infinite-scroll-error">No more pages to load</p>
</div>
<div class="pagination">
    <a href="page2.html" class="pagination__next">もっと見る</a>
</div>

<li>の部分は省略してますが、デモではこんな感じで書いてます。
「.grid__item」というクラスが無限スクロールします。
「.page-load-status」は、ローディング中の表示や、コンテンツの最後に到達した際の表示など。
「.pagination」に、次に読み込むページのリンクを書きます。

jQuery


$(function(){
    var $grid = $('.grid');
    $grid.masonry({
        itemSelector: 'none',
        columnWidth: '.grid__item',
        gutter: 20,
        stagger: 30,
        percentPosition: true,
        visibleStyle: { transform: 'translateY(0)', opacity: 1 },
        hiddenStyle: { transform: 'translateY(100px)', opacity: 0 },
    });

    var msnry = $grid.data('masonry');

    $grid.imagesLoaded(function() {
        $grid.masonry( 'option', { itemSelector: '.grid__item' });
        var $items = $grid.find('.grid__item');
        $grid.masonry( 'appended', $items );
    });
    
    var nextSlugs = [
        'page2.html',
        'page3.html'
    ];
    
    function getPath() {
        var slug = nextSlugs[ this.loadCount ];
        if( slug ) {
            return 'https://www.miso.blog/demo/masonry_infinitescroll/';
        }
    }

    $grid.infiniteScroll({
        path: getPath,
        append: '.grid__item',
        outlayer: msnry,
        scrollThreshold: 40,
        hideNav: '.pagination',
        status: '.page-load-status',
    });
});

旧バージョンと書き方が違って、結構悩みました。

こちらを参考にしました。

Infinite Scroll – Masonry