素材の壺

ボックスをタイル状に配置するためのプラグイン「jQuery Masonry」と、ページ送りを自ページ内で完結するためのライブラリ「jQuery Autopager」。これらは良く使うjQueryのライブラリな訳ですが、いざ併用しようとするとうまく動作しなくなるのがプラグインの難しいところ。MasonryはAutopagerと同様の機能を「Infinite Scroll」というプラグインもあるのですが、他のスクリプトとの干渉があるのか動作せず、今回は「jQuery Autopager」を使う事となりました。

しかしなかなかうまく動作せず、読み込んだ次ページのボックス達が並んでくれなかったり、重なって表示されたり、といった状況から抜け出すのに時間がかかってしまいました。試行錯誤のうえようやく解決したのが下記の記述です。自動的に読み込むのではなくクリックで次ページの内容を読み込む内容となっています。

※jQuery、masonry、autopagerはそれぞれ先に読み込みます
※パスやID名などは環境にあわせて変更が必要です

▼jQuery本体
http://jquery.com/download/

▼jQuery Masonry
http://masonry.desandro.com/

▼jQuery autopager
http://lagoscript.org/jquery/autopager/download

まずはそれぞれのJSを読み込みます。

MasonryとAutopagerそれぞれの実行部分を下記のように記述します。

$(document).ready(function() {

	var $container = $('#container');
	
	// masonry
	$container.imagesLoaded(function(){  
		$container.masonry({
			itemSelector: '.box',
			columnWidth: 200
		});
	});

	// autopager
    $.autopager({
        autoLoad: false
    });
    $('a[rel=next]').click(function() {
        $.autopager('load');
        $.autopager({
            load: function() {
            	$container.masonry('reload');
            },
            autoLoad: false
        });
        return false;
    });

});

Autopagerには、読み込み時に実行するstartと、読み込み後に実行するloadというコールバックがあるので、次ページを読み込んだ後に、Masonryのreloadを実行する事で、ボックスが再形成され、正常に表示される、という仕組みになっています。これで「jQuery Masonry」と「jQuery Autopager」を併用する事ができます。