在我的博客中之前已经分别讲过masonry和infinitescroll插件,以及详尽的demo。这里讲的重点是二者的结合实现无限加载分页,话不多说,直接上代码。
$(function(){
var $container = $('#masonry');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.box',
gutterWidth : 20,
isAnimated: true,
});
});
infiniteScroll = function() {
// infinite scrolling
var $container = $('#masonry');
$container.infinitescroll({
binder: $('#conScroll'),
navSelector : '#page-nav', // selector for the paged navigation
nextSelector : '#page-nav a', // selector for the NEXT link (to page 2)
itemSelector : '.box', // selector for all items you'll retrieve
pixelsFromNavToBottom: 150,
extraScrollPx: 50,
// debug : true,
prefill : true,
bufferPx : 1, //提示语展现的时长,数字越大,展现时间越短
path : function(page){
return 'image.html';
},
loading: {
finishedMsg: 'no more comments!',
msgText: 'onload old comments',
img: 'images/loading-dark.gif'
}
},
function( nextComments ) {
var $nextComm = $( nextComments );
$container.masonry( 'appended', $nextComm, true ); //这里需要特别注意
});
}
infiniteScroll();
});
demo下载地址 http://download.csdn.net/detail/jiangjundriver/9871462