插件下载:http://pan.baidu.com/s/1o6t0v7W
引入jquery.js和插件后,JS代码:
$(document).ready(function(){
$('#icontent').infinitescroll({
//#indexpost 是包括所有文章的div元素id
navSelector : "#navigation",
// 页面分页元素(成功后隐藏)
nextSelector : "#navigation a",
// 需要点击的下一页链接
itemSelector : "#icontent div.post" ,
// 返回后文章对应的插入位置
loadingImg : "图片地址",
//加载图片路径(绝对路径)
loadingText : "加载中..." ,
//显示的提示文字
animate : true,
//加载完毕是否采用动态效果
extraScrollPx: 150,
//向下滚动的像素,必须开启动态效果
donetext : "后面没有了" ,
//返回404,即到头了显示的文字
},function(arrayOfNewElems){
});
// 取消scroll绑定
$(window).unbind('.infscr');
// 手动点击的元素
$('#navigation a').click(function(){
$(document).trigger('retrieve.infscr');
return false;
});
// 如果没有下一页,去掉分页
$(document).ajaxError(function(e,xhr,opt){
if (xhr.status == 404) $('#navigation').remove();
});
});
Html代码结构
<div id="content"> <div id="icontent"> </div><!--icontent--> <div id="navigation"> <a href="#">1</a> <a href="#">2</a> </div> </div><!--content-->CSS代码:
#navigation{
display:block!important;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border: 1px solid #ddd;
background: #EFEFEF;
box-shadow: 2px 2px 2px rgba(50,50,50,0.4);
color: #444;
text-decoration: none;
width:60%;
margin:0 0 0 90px;
padding: 10px;
text-align: center;
}