Masonry(v3)と無限スクロールを組み合わせる方法
自動で枠にぴったりと並べ変えをしてくれるjQueryプラグイン「Masonry」と無限スクロールjQueryプラグイン「Infinite scroll」を組み合わせる方法をご紹介致します。
色々とつまづいたので残しておきます。
Masonryと無限スクロールを組み合わせる
必要だったものは以下のjQueryプラグインです。
- Masonry(v3) – 記事公開時のバージョンはv3.1.5でした。
- 無限スクロール -infinite scroll
- 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のせいなのですかねー
今度検証してみます。