jQuery的砌体无限滚动设立

Question

我知道有一个几个问题的是，检查了所有的只是无法得到它的工作，因为我不知道如何开始......

我有基本的砖石设置：

http://jsfiddle.net/Lj0q8fe6/

现在我怎么可以设置多少个元素在第一显示，我怎么能触发启动加载与无限scoll下一个要素是什么？请帮助

我发现了很多这样的：

jQuery(window).load(function(){ 

jQuery('.hfeed').masonry({ 
    singleMode: true, 
    itemSelector: '.box' 
}); 

jQuery('.hfeed').infinitescroll({ 
    navSelector : '.pagination', // selector for the paged navigation 
    nextSelector : '.pagination .next', // selector for the NEXT link (to page 2) 
    itemSelector : '.box',  // selector for all items you'll retrieve 
    loadingImg : '/wp-content/themes/sprppl/images/loader.gif', 
    loadingText : "Loading...", 
    donetext : 'No more pages to load.', 
    debug: false, 
    errorCallback: function() { jQuery('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal'); } 
    }, 
    // call masonry as a callback 
    function(newElements) { jQuery(this).masonry({ appendedContent: jQuery(newElements) }); } 
);  

}); 

但是，当我将其插入，什么都不会发生。如何从这里开始？

Answer 1

这里是一个

jsFiddle

与纠正和固定码以及一些infinitescroll代码你的JavaScript外部资源。您需要制作一个index2.html页面加载项目进行测试，因为我无法将其放入小提琴中。最简单的测试方法是复制一个页面并将其称为index2.html。

$(document).ready(function() { 
var $container = $('#content'); 
$container.imagesLoaded(function() { 
// Initialize Masonry 
$container.masonry({ 
    columnWidth: 320, 
    itemSelector: '.item', 
    isFitWidth: true, 
    isAnimated: !Modernizr.csstransitions 
}); 

}); 
$container.infinitescroll({ 
    navSelector : 'a#next', // selector for the paged navigation 
    nextSelector : 'a#next', // selector for the NEXT link (to page 2) 
    itemSelector : '.box',  // selector for all items you'll retrieve 
    loading: { 
     finishedMsg: 'No more pages to load.', 
     img: 'http://i.imgur.com/6RMhx.gif', 
     msgText: "<em>Loading the next set of posts...</em>" 
    }, 
errorCallback: function() { $('#infscr-loading').animate({opacity: 0.8},2000).fadeOut('normal');  } 
}, 
// call masonry as a callback 
    function(newElements) { 
var $newElems = $(newElements); 
$container.masonry('appended', $newElems); 
} 
);  
});