您的位置:首页 > 其它

masonry+infinitescroll实现无限加载分页

2017-06-15 16:15 302 查看
在我的博客中之前已经分别讲过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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: