<script type="text/javascript" src="js/jquery-1.10.0.min.js"></script>
<script type="text/javascript" src="js/jquery.infinitescroll.min.js"></script>
1、创建一个容器
<div id="conversation">
<div class="comment">...</div>
<div class="comment">...</div>
...
</div>
2、添加翻页的链接
<div id="page-nav">
<a href="conversations.php?page=2"></a>
</div>
在加载的时候,页面会出现一个loading的层(id是#infscr-loading),这个部分的样式需要我们自己去定义,下面是我自己网站的一个半透明黑色的样式,如果你喜欢,可以直接拿去用
#infscr-loading {
text-align: center;
z-index: 100;
position: fixed;
left: 45%;
bottom: 40px;
width: 200px;
padding: 10px;
background: #000;
opacity: 0.8;
color: #FFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
infiniteScroll = function() {
// infinite scrolling
var $container = $('#conversation');
$container.infinitescroll({
binder: $('#conScroll'), // used to cache the selector
navSelector : '#page-nav', // selector for the paged navigation
nextSelector : '#page-nav a', // selector for the NEXT link (to page 2)
itemSelector : '.comment', // selector for all items you'll retrieve
pixelsFromNavToBottom: 150,
extraScrollPx: 50,
debug : true,
prefill : true,
bufferPx : 1, //提示语展现的时长,数字越大,展现时间越短
path : function(page){
return 'conversation.html';
},
loading: {
finishedMsg: 'no more comments!',
msgText: 'onload old comments',
img: 'img/loading-dark.gif'
}
},
function( nextComments ) {
var $nextComm = $( nextComments );
$container.append($nextComm);
});
}
infiniteScroll();
//onload more
/*$('#conScroll .onloadmore').click(function(){
$("#conversation").infinitescroll('retrieve');; //比如加到某个click事件中
});*/
// 取消scroll绑定
$('#conScroll').unbind('.infscr');
// 手动点击的元素
$('#next').click(function(){
$('##conversation').infinitescroll('retrieve');
});
demo下载地址 http://download.csdn.net/detail/jiangjundriver/9871458