Scroll]の併用方法を紹介します。サンプルをご覧ください。More」をクリックするとページが遷移することなく次のコンテンツを表示させるていく「無限スクロール」が起動します。Scroll]では、ページの最下部までスクロールすると自動で追加コンテンツが表示される仕様になっています。ボタンをクリックすることによる追加コンテンツの表示方法は独自のカスタマイズになります。このあたりの詳しい実装方法は昨日の記事で紹介しています。Scroll]の実装方法また[Masonry]の単体の実装方法も過去記事で紹介しています。Scroll]の理解が深まるでしょう。Scroll]を実装する。Scroll]を組み込んでいくことになります。[Masonry]の動きをスムーズに描画させるために、jQueryの[ImagesLoaded]プラグインも併せて使用します。それぞれ必要なファイルは、以下の各種公式サイトからダウンロードしてください。src="jquery.infinitescroll.edit.js"></script></head>無限スクロールする主要コンテンツ部分は「#masonry」と名付けた親要素の中に「.item」と名付けた子要素を含めて構成します。ナヴィゲーション部分は「.navigation」で、リンク先は次のページを指定。ここでは仮に「demo-2.php」としています。More</a></p></body>続いてスクリプトの設定ですが、具体的には以下のコードを使います。Scroll]を組み合わせて、さらには[ImagesLoaded]まで使用した設定を併記するので複雑に感じるかもしれませんが、実際にやっていることはコールバック関数を指定して処理を繋げているだけになっています。実際に動いているサンプルは以下のリンク先からどうぞ。オンズ株式会社オンズ制作チーム。ウェブサイト制作、デザイン制作でお悩みの際はお気軽にご相談ください。https://on-ze.comTwitterFacebookFeedlyLINEこちらの記事もいかがですか?アナタにオススメ!同じカテゴリーの他の記事です。【jQuery】ウィンドウ内に要素が表示されたときに処理を行う[jquery.inview]プラグイン。【jQuery】郵便番号を入力すると住所を自動補完する[jquery.jpostal.js]が便利です。Tubular]を紹介します。【jQuery】フォームへの再入力時にペーストを禁止する方法。