Masonry(v3)と無限スクロールを組み合わせる方法

Masonryと無限スクロールを組み合わせる

必要だったものは以下のjQueryプラグインです。

1. Masonry(v3) – 記事公開時のバージョンはv3.1.5でした。
2. 無限スクロール -infinite scroll
3. imagesLoaded -Masonry v3からはこれがincludeされなくなったようですので、別にjsファイルが必要です。

ある案件で、Wordpressでの投稿を無限スクロール+Masonryの組み合わせをしたいとの事でした。

無限スクロールは、Wordpressのプラグインとして出ており、プラグインで処理しようと思っていたのですが、

Masonryの動作が上手くいかず(MasonryのjQueryなども読み込んだり、callbackで動作させたりと色々しましたがErrorが発生しました)結局、断念致しました。

そこで、jQueryのプラグインで処理させました。

jQuery Source

<script src="/common/js/jquery.infinitescroll.js"></script>
<script src="/common/js/masonry.pkgd.min.js"></script>
<script src="/common/js/imagesloaded.pkgd.js"></script>
<script type="text/javascript">
$(function(){
    var $blocks = $('.main');
    /* 画像読み込み後の動作 */
    $blocks.imagesLoaded(function(){
        $blocks.masonry({ itemSelector: '.post' });
    });

    /* 無限スクロール設定 */
    $('.main').infinitescroll({
        navSelector : '.pagenation',
        nextSelector : '.next a',
        itemSelector : '.post',
        loading : {
            finishedMsg : 'No more posts',
            img : "/common/img/loading.gif",
            msgText : 'Loading',
        },
    },function(elm){
        /* 無限スクロールCallBack */
        var $newElem = $( elm ).css({ opacity: 0 });
        /* 画像読み込み後の動作 */
        $newElem.imagesLoaded(function(){
            $newElem.animate({ opacity: 1 });
            $blocks.masonry( 'appended', $newElem, true );
        });
    });
});
</script>

無限スクロールのcallbackが動作した時点で読み込んだ要素を一旦opacityを0にしています。

アイキャッチ画像など画像の読み込みが完了してから、opacityを1に戻すアニメーションにしています。

WordPressでの記事読み込みループ部分のテンプレートは以下のような形です。

<div class="main">
<?php if ( have_posts() ) :
 while ( have_posts() ) : the_post(); ?>
  <div class="article post">
      <div>
          <a href="<?php the_permalink(); ?>">
              <?php if ( has_post_thumbnail()) : ?>
                  <?php the_post_thumbnail('thumbnail'); ?>
              <?php else: ?>
                  <img src="<?php echo get_template_directory_uri(); ?>/img/fallback.png" width="250" height="150" alt="FallBack">
              <?php endif; ?>
          </a>
          <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
          <p class="excerpt"><?php echo the excerpt(); ?></p>
      </div>
  </div><!-- /.article -->
<?php endwhile; else: ?>
<?php endif; ?>

<?php
 //Pagenation
 if (function_exists("pagination")) {
 pagination($additional_loop->max_num_pages);
 }
?>

 

このソースは以下を参考にいたしました。

masonryを使いながらinfinite scrollを使って画像が重ならないようにする– Qiita

imagesLoadedがincludeされているMasonry v2などでしたら、上記のサイトのコードで即実行可能かと思います。

すんなりといけばいいですが、imagesLoadedを入れずにこのコードをするとfunction errorになるので、ご注意を(それで、ちょっと悩んでましたw)

プラグインの無限スクロールのオプションのMasonryのエラーはこのimagesLoadedのせいなのですかねー

今度検証してみます。