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]まで使用した設定を併記するので複雑に感じるかもしれませんが、実際にやっていることはコールバック関数を指定して処理を繋げているだけになっています。実際に動いているサンプルは以下のリンク先からどうぞ。Scroll]:オンズのサンプルTwitterFacebookGoogle+FeedlyLINEこちらの記事もいかがですか?アナタにオススメ!同じカテゴリーの他の記事です。【jQuery】背景色を複数のグラデーションで彩るプラグイン「Shards」の実装方法。【jQuery】要素が「横幅」と「縦幅」を持って表示されているかどうかを確認する方法。【jQuery】[Masonry]の表示の不具合を解消するために[imagesLoaded]を併用する方法。【jQuery】レスポンシブ対応のスライドショーには最新版の[Glide.js]がオススメです。【jQuery】これだけで完璧に導入できる[Lightbox]の実装方法。