函数参数详解:
$('#content').infinitescroll({
navSelector : "div.navigation", //导航的选择器,会被隐藏
nextSelector : "div.navigation a:first",//包含下一页链接的选择器
itemSelector : "#content div.post",//你将要取回的选项(内容块)
debug : true, //启用调试信息
loadingImg : "/img/loading.gif", //加载的时候显示的图片
//默认采用:"http://www.infinite-scroll.com/loading.gif"
animate : true, //当有新数据加载进来的时候,页面是否有动画效果,默认没有
extraScrollPx: 50, //滚动条距离底部多少像素的时候开始加载,默认150
bufferPx : 40,//载入信息的显示时间,时间越大,载入信息显示时间越短
errorCallback: function(){},//当出错的时候,比如404页面的时候执行的函数
localMode : true //是否允许载入具有相同函数的页面,默认为false
},function(arrayOfNewElems){
//程序执行完的回调函数
});
官方首页及下载地址: http://www.infinite-scroll.com/
Masonry
参数详解:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | $(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,//使用从右到左的布局 }); }); |
官方首页及下载地址:http://masonry.desandro.com/index.html
样例掩饰 :
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script src="jquery.infinitescroll.min.js" type="text/javascript"></script>
<script src="jquery.masonry.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var $container = $('#content ul'); //设置容器
$('#content ul').infinitescroll({
navSelector : "div.page .pages", //导航的选择器
nextSelector : "div.page .pages a.nextpage", //包含下一页链接的选择器
itemSelector : "#content ul li" //你将要取回的选项(内容块)
}, function( newElements ) {
//程序执行完的回调函数
var $newElems = $( newElements );
$container.masonry( 'appended', $newElems );
});
$('#content').masonry({
itemSelector : '#content li', //子类元素
columnWidth : 251 //一列的宽度
});
});
</script>
masonry:使用方法
http://www.vr2rv.cn/jquery/demo/masonry-site/docs/methods.html