あなたの問題は実際にはcssだと思います。ページをクライアント領域の高さより長くします。$container にさらに画像を追加
ポイントは、 $container の下端がウィンドウの下部を通過する必要があるため、スクロールイベントが発生し、無限スクロールがこのイベントに反応して天気を計算できるか、端に達していないかです
ところで、同じ場合、たとえば、ウィンドウを縮小すると、設定した例が機能します。
===更新===
私はinfinitescrollで遊ぶ時間を見つけました。これが最終的な作業スクリプトです。スクリプトにpathParseメソッドを設定するだけです
$(function () {
var $container = $('#itemContainer');
$container.imagesLoaded(function () {
$container.masonry({
itemSelector:'.item'
});
});
$container.infinitescroll({
navSelector:'.navigation', // selector for the paged navigation
nextSelector:'.navigation #next', // selector for the NEXT link (to page 2)
itemSelector:'.item', // selector for all items you'll retrieve
bufferPx:40,
debug:true,
columnWidth:function (containerWidth) {
return containerWidth / 5;
},
loading:{
finishedMsg:'No more pages to load.',
img:'http://i.imgur.com/6RMhx.gif'
},
pathParse: function(path,page){
return $(this.nextSelector).attr("href");
}
},
// trigger Masonry as a callback
function (newElements) {
// hide new items while they are loading
var $newElems = $(newElements).css({ opacity:0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function () {
// show elems now they're ready
$newElems.animate({ opacity:1 });
$container.masonry('appended', $newElems, true);
});
//console.log("test (never fired :( )");
}
);
});
さて、次のリンクはそれ自体では更新されないため (http://reddit.ymindustries.com/?after=t3_yh4av)、コールバックを変更して ajax 応答から最後の要素を引き出し、次のリンクを変更する必要があります...このようなものかもしれません
function (newElements) {
// hide new items while they are loading
var $newElems = $(newElements).css({ opacity:0 });
// ensure that images load before adding to masonry layout
// ======> if query parameter after=... is caring filename then do this
var lastImageUrl= $newElements[$newElements.length-1].attr("src");
var lastFileName= lastImageUrl.substring(lastImageUrl.lastIndexOf("/") +1, lastImageUrl.lastIndexOf("."));
$("#next").attr("href", "http://reddit.ymindustries.com/?after="+lastFileName);
$newElems.imagesLoaded(function () {
// show elems now they're ready
$newElems.animate({ opacity:1 });
$container.masonry('appended', $newElems, true);
});
//console.log("test (never fired :( )");
}