BLOGなにかの役には立つかもしれない。ギャラリーfacebookやtwitterなどでは、タイムラインを下にスクロールすると次の記事を無限にスクロールすることができます。要素をタイル状に表示する超有名jQueryプラグイン「Masonry」を利用すると、グリッドデザインで要素を美しく表示することができます。Scrollを組み合わせて、Masonryで並べ替えたギャラリーなどに無限スクロールを実装してみます。demo(手動リロードの場合)demo(自動リロードの場合)必要なもの必要なjQueryプラグインは以下のとおりです。ScrollMasonryとImageLoadedについては別記事で詳しく紹介していますのでそちらをご参照ください。Scrollについては下記のとおりです。Scrollとは前述のとおり、facebookやtwitterでも導入されているプラグインです。ページ下部までスクロール完了後、次ページの要素を読み込んで表示します。Masonryと併用しなくても利用できますが、今回は特にMasonryと併用する場合についてご紹介しています。Scrollをダウンロードしてください。Scrollでリロードする方法は下記の通りです。Scrollを利用して次の画面の要素を読み込んでindex.html上で表示できるようにする場合の書き方です。src="./imagesloaded.pkgd.min.js"></script>元のページ(index.html)のheadタグ内で、jQueryと必要なプラグインを読み込んでおいてください。元のページ(index.html)のbodyタグ内に、下記のように記述します。</div>Masonryで並び替える要素を内包するブロックに、galleryというIDを付与します。Masonryで並び替える要素には、それぞれgalleryというクラスをつけています。Scrollで読み込む次のページへのリンクを、navigationというIDのブロック内に指定しています。今回はサンプルとして、masonry2.htmlというページを読み込んで、中にあるdiv要素(galleryクラス)を表示します。</div>のように、Masonryで並び替える要素=元ページから読み込まれる要素にgalleryというクラスをつけて下さい。次のページを読み込みたい場合は、navigation要素内に次のリンク(今度はmasonry3.html)を設定して下さい。none;}スタイルシートを設定します。left;をつけておきましょう。#infscr-loadingはローディング画像などを表示するためのブロックですが、こちらのスタイルが設定されていないので、上記を参考に書いておくとよいでしょう。Scrollで表示する要素をMasonryで表示する時は、下記のように記述してください。headタグ内に記述しても、外部SCとして読み込んでもOKです。});});28行目で次のページヘのリンクが表示されるように調整しています。});まとめMasonry+ImageLoaded+InfiniteScrollはギャラリーページを作るときなどに非常に有用です。手動リロードと自動リロードの使い分けが思ったよりも難しかったので個人的備忘録でした。Formコメントを入力してください。半角で入力してください。NETsince:2014.01.01東京都を拠点としたSOHO(フリーランス)による創作サイト向けWEB制作サービスを行っています。お仕事とか創作活動とかでメモっておきたいこととかを掲載しています。