Logo Infinite Scroll

昨日に引き続き、今日は「無限スクロールの極限カスタマイズ」の完成形として、石畳風のレイアウトを実装する［Masonry］と［Infinite Scroll］の併用方法を紹介します。

まずはサンプルをご覧ください。

［Masonry］×［Infinite Scroll］：オンズのサンプル

レイアウトは［Masonry］がベースになっていて、「Read More」をクリックするとページが遷移することなく次のコンテンツを表示させるていく「無限スクロール」が起動します。

通常［Infinite Scroll］では、ページの最下部までスクロールすると自動で追加コンテンツが表示される仕様になっています。
ボタンをクリックすることによる追加コンテンツの表示方法は独自のカスタマイズになります。
このあたりの詳しい実装方法は昨日の記事で紹介しています。

［Infinite Scroll］の実装方法

また［Masonry］の単体の実装方法も過去記事で紹介しています。
こちらも先にご覧いただくと、今回の［Masonry］×［Infinite Scroll］の理解が深まるでしょう。

［Masonry］の実装方法

［Masonry］と［Infinite Scroll］を実装する。

スクリプトを書く際の考え方としては、まず最初に［Masonry］を実装し、続いて［Infinite Scroll］を組み込んでいくことになります。
また［Masonry］の動きをスムーズに描画させるために、jQueryの［ImagesLoaded］プラグインも併せて使用します。

それぞれ必要なファイルは、以下の各種公式サイトからダウンロードしてください。

ダウンロードしたファイルのうち、「jquery.js」「masonry.min.js」「jquery.infinitescroll.min.js」「imagesloaded.js」を <head>〜</head> 内で読み込みます。

<head>
<script src="jquery.js"></script>
<script src="imagesloaded.js"></script>
<script src="jquery.masonry.min.js"></script>
<script src="jquery.infinitescroll.edit.js"></script>
</head>

無限スクロールする主要コンテンツ部分は「#masonry」と名付けた親要素の中に「.item」と名付けた子要素を含めて構成します。
ナヴィゲーション部分は「.navigation」で、リンク先は次のページを指定。ここでは仮に「demo-2.php」としています。

<body>
<div id="masonry">
	<div class="item">コンテンツ Part.1</div>
	<div class="item">コンテンツ Part.2</div>
	<div class="item">コンテンツ Part.3</div>
	<div class="item">コンテンツ Part.4</div>
</div>
<p class="navigation"><a href="demo-2.php">Read More</a></p>
</body>

続いてスクリプトの設定ですが、具体的には以下のコードを使います。

$(function(){
	var $container = $('#masonry');
	$container.imagesLoaded(function(){
		$container.masonry({
			itemSelector: '.item',
			isFitWidth: true,
			isAnimated: true,
			isResizable: true
		});
	});
	$container.infinitescroll({
		navSelector  : '.navigation',
		nextSelector : '.navigation a',
		itemSelector : '.item',
		animate:true,
		extraScrollPx: -200,
		loading: {
			finishedMsg: '終わりです！',
			img: 'loading.gif'
		}
	},
	function( newElements ) {
		var $newElems = $( newElements );
		$newElems.imagesLoaded(function(){
			$container.masonry( 'appended', $newElems, true ); 
		});
	});
});

［Masonry］と［Infinite Scroll］を組み合わせて、さらには［ImagesLoaded］まで使用した設定を併記するので複雑に感じるかもしれませんが、実際にやっていることはコールバック関数を指定して処理を繋げているだけになっています。

実際に動いているサンプルは以下のリンク先からどうぞ。

［Masonry］×［Infinite Scroll］：オンズのサンプル