• かちびと.net

    ボックス要素を綺麗に整列出来るjQueryプラグイン・jQuery MasonryにInfinite Scroll(無限スクロール)機能を加えたサンプルのご紹介。最近よく目にするので触ってみました。課題も生まれたので少し検証しないとですね。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

ボックス要素を綺麗に整列出来る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

URL :
TRB :

Comments & Trackbacks (13)

  1. さき

    こんにちは。

    参考させていただきます。

    突然ですが、教えていただきたいことがありますが。。

    こちらに書かれている ul li の要素は一番最初に表示されてほしい個数でしょうか。

    私のサイトでは、そのカテゴリに所属している投稿を masonry を使って表示していますが、
    今すべてを表示しているようにしていて、今後 infinite scroll に変更しようと考えています。
    今までカテゴリに所属している投稿★すべて★を取得しているようにしていたので、
    今後、最初に取得すべき投稿数のみに変更しないといけないかと悩んでいます。

    よろしくおねがいします。

    • シロ

      こんにちは。コメント有難うございますー。

      こちらに書かれている ul li の要素は一番最初に表示されてほしい個数でしょうか。

      少し前に書いた記事なので見返してみましたが、ulやliについて言及してる箇所が無いように思えます。当記事内のどの辺りでしょうか?

      今までカテゴリに所属している投稿★すべて★を取得しているようにしていたので、
      今後、最初に取得すべき投稿数のみに変更しないといけないかと悩んでいます。

      えーと、つまり「現在は大量のアイテムをmasonryを使ってレイアウトしてるだけのものを複数ページに分割し、infinite scrollで読み込むようにしたい」という理解で合ってますか?

      申し訳ないのですが書いて頂いた内容では状況が把握できませんのでどう回答してよいか判断出来ません。

      • さき

        こんばんは。お返事ありがとうございます!うれしいです!

        本当にごめんなさい!!たくさんのサイトを見ていて混乱してしまいました。

        ul や li の話を申し訳ないですが、忘れててください。
        シロさんのサイトでいうと、class=box の要素でした。
        http://kachibito.net/sample/jquery-masonry/

        Oh not another one! / Reinis Traidas

        >>今までカテゴリに所属している投稿★すべて★を取得しているようにしていたので、
        >>今後、最初に取得すべき投稿数のみに変更しないといけないかと悩んでいます。

        >えーと、つまり「現在は大量のアイテムをmasonryを使ってレイアウトしてるだけのものを複数ページに分割し、infinite scrollで読み込むようにしたい」という理解で合ってますか?

        そうです、そうです。。
        すいません。。色々わからなくて質問もわかりづらくなっています。

        整理しますと、Wordpressでサイトを作っていて、Masonryで表示しています。
        ここまでは問題なく動きました。
        Masonryで表示している内容が、すべてWordpressで投稿した内容となります。
        http://bit.ly/16Tve1O

        最初は、
        $args = array(
        ‘post_type’ => ‘post’,
        ‘posts_per_page’ => ‘-1′, // ここに注目
        ‘category__in’ => “$cat_id”,
        ‘post_status’ => ‘publish’,
        ‘orderby’ => ‘date’,
        ‘order’ => ‘ASC’
        );

        $loop = new WP_Query($args);
        ?>
        have_posts()): $loop->the_post(); ?>
        ここで div class=”box” を繰り返してボックスに画像投稿を表示

        こちらをすべての件数(-1) ではなく、最初の10件だけ表示して、infinite scroll で次の10件ずつを取り出そうと思っています。
        シロさんの、http://kachibito.net/sample/jquery-masonry/ のサイトみたいです。

        そうしますと、
        ‘posts_per_page’ => ’10′
        にしましたら、今度10件しか表示されてない(最初はこれでいいと思いますが)ですが、infinite scroll が効いていなくて、posts_per_pageのせいなのか、そもそも jquery が間違っていたのかわからなかったので、シロさんの実装方法を聞いてみました。

        私の質問があいまいでわかりづらくて申し訳ありません。
        wordpress で、masonry + infinite scroll の組み合わせを使ったことありますでしょうか。

  2. さき

    たびたびの投稿で大変恐縮です。

    1歩進んだので勝手に報告させていただきます。

    ページングのナビゲーションが正しくない場合は infinite scroll が正しくないこと、、恥ずかしながら今わかりました。

    自分のWordpressで、
    max_num_pages > 1) : ?>

    max_num_pages); ?>
    max_num_pages); ?>

    以上を追加したらどうやら認識してくれたようです。が・・・・・

    ここで1つの問題がありまして、この next_post_link で生成されたURLが、/page/2 のようなURLで、私は custom post type UI での投稿を masonry で表示しているため、page/2 のページが存在していないです。

    これはどうやって解決すべきかわかりますか?

    シロさんのように次から次へと画像(custom post type UI による投稿)を表示したいですが。。

    ちなみに、私のサイトはこれです。。
    素人でお恥ずかしいですが。。
    http://phototravel.flop.jp/category/japan/showa/

    連続投稿で大変恐縮です m(___)m

    • シロ

      状況、概ね把握いたしました。
      WordPress+infinite scrollでしたらプラグインが出ていますが、お試しになられたでしょうか?

      http://wordpress.org/plugins/infinite-scroll/

      僕はこのWPプラグインを使った事無いので動作を保証する事は出来ませんが、まだでしたらまず先にお試しになら手は如何でしょうか。これで動けば楽だと思いますので。

      尚、masonryはレイアウトを作る為だけのものなのでinfinite scrollの動作に影響を与える事は多くはありません。同じjQuery依存なのでセレクタに気をつければ問題ないと思います。

      余計な事かもしれませんが、ご自身が頑張って作られたサイトなので胸を張ってご紹介なさってくださいませ。とっても素敵に作られていると思います。

      • さき

        お返事ありがとうございました!
        色々やったらうまくできました!私の質問に付き合ってくださって、本当に感謝感激です。
        ありがとうございましたー

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services