ボックス要素を綺麗に整列出来るjQueryプラグイン・jQuery MasonryにInfinite Scroll（無限スクロール）機能を加えたサンプル

必要になってjQuery Masonryのサイトに出向い
たらいつのまにかInfinite Scroll機能（スク
ロールで次ページを読み込むやつ）が追加され
ていたのでちょっと触ってみました。まだ使う
機会はありませんけど、なんとなくこのUIを
よく見かけるのでメモ的に記事にしておきます。

jQuery Masonryはボックス要素をレンガのように敷き詰めてレイアウトを組めるようにするjQueryプラグインです。これは以前も書いたようにFacebookページでも使っているんですが、いつのまにかInfinite Scroll（無限スクロール）出来るようになっていたので備忘録です。

jQuery MasonryでInfinite Scroll

この状態でスクロールすると次のページをどんどん読み込んでいく、というもの。要はAutopagerizeですかね。

サンプルです。

Sample

スクロールするとボックス要素が自動で追加されていきます。

↑ IE6のキャプチャ。一応クロスブラウザで動いてるっぽいです。

コード

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> 
<script src="jquery.masonry.min.js"></script> 
<script src="jquery.infinitescroll.min.js"></script>

本体とMasonryとinfinitescrollプラグインを読み込みます。

<script> 
  $(function(){
    var $container = $('#container');
    $container.imagesLoaded(function(){
      $container.masonry({
        itemSelector: '.box',
        columnWidth: 100
      });
    });
    
    $container.infinitescroll({
      navSelector  : '#page-nav',    // ナビゲーション
      nextSelector : '#page-nav a',  // 次ページへのリンク
      itemSelector : '.box',     // 次ページ内で探す要素
      loading: {
          finishedMsg: 'もう無いよ',
          img: 'load.gif'//ローディング画像
        }
      },
      // コールバック
      function( newElements ) {
        var $newElems = $( newElements );
        // ボックスを配列させる前に画像をロードしとく
        $newElems.imagesLoaded(function(){
          $container.masonry( 'appended', $newElems, true ); 
        });
      }
    );
  });
</script>

スクロールすると次ページのHTMLからboxというclass名の要素を探して配列させますが、配列前に画像を先に読み込むことでアニメーション時に既に画像が表示されている状態で実装出来るようにします。appendedというオプションを使います。

indexページには次ページへのリンクをマークアップしておくみたい。

<nav id="page-nav"> 
  <a href="pages/02.html"></a> 
</nav>

とはいえ、こうしてテスト的に触ることでいくつか課題も見えたので暇を見ながら検証しないとです。ドキュメント等は以下でどうぞ。

jQuery Masonry – Infinite Scroll