1.infinite-scroll-jquery
参数详解:
$('#content').infinitescroll({
navSelector : "div.navigation", //导航的选择器,会被隐藏
nextSelector : "div.navigation a:first",//包含下一页链接的选择器
itemSelector : "#content div.post",//你将要取回的选项(内容块)
debug : true, //启用调试信息
loadingImg : "/img/loading.gif", //加载的时候显示的图片
//默认采用:""
animate : true, //当有新数据加载进来的时候,页面是否有动画效果,默认没有
extraScrollPx: 50, //滚动条距离底部多少像素的时候开始加载,默认150
bufferPx : 40,//载入信息的显示时间,时间越大,载入信息显示时间越短
errorCallback: function(){},//当出错的时候,比如404页面的时候执行的函数
localMode : true //是否允许载入具有相同函数的页面,默认为false
},function(arrayOfNewElems){
//程序执行完的回调函数
});
下载地址:git clone git://github.com/paulirish/infinite-scroll.git
2.Masonry
参数详解:$(function(){
$(?#container?).masonry({
// options 设置选项
itemSelector : ?.item?, //子类元素选择器
columnWidth : 240 ,//一列的宽度 ,包括边距 220+10+10
isAnimated:true, //使用jquery的布局变化,是否启用动画效果
animationOptions:{
//jquery animate属性 ,动画效果选项。比如渐变效果 Object { queue: false, duration: 500 }
},
gutterWidth:0,//列的间隙
isFitWidth:true,//自适应宽度
isResizableL:true,// 是否可调整大小
isRTL:false,//使用从右到左的布局
});
});下载地址:
3. 结合使用
前台用法:
$(function(){
$('.org_list2').masonry({
itemSelector: '.org_list2 li'
});
$('.org_list2').infinitescroll({
navSelector: '#page',
nextSelector: '#page a', //下一页选择器
itemSelector: "li", //下一页中需要被加载进当前页的块
loading: { //加载效果
finishedMsg: 'No more pages to load',
img: '',
selector:"#loadingbox"//指定图片加载的位置
}
},
function (newElements) { //回调函数,用Masonry布局
var newElems = $(newElements);
$('.org_list2').masonry('appended', newElems);
}
);
$('.org_list2').masonry({
itemSelector : '.org_list2 li', //子类元素
columnWidth : 251 //设置元素的一列的宽度
}); });
后台处理
$page =$page+1;
$nexturl ="";
$this->view->assign('nexturl',$nexturl);//每次返回下一页的url
阅读(5213) | 评论(0) | 转发(1) |