infinite-scroll,Masonry实现无刷新无分页瀑布流

最近看了很多网站特别是图片类的分享网站都使用了一种新的展示样式，这种无规则交错的排版样式，吸引了众多网友的眼球，这个就是传说中的瀑布流网站，也叫砌墙效果。

海天也很喜欢这种错乱交织但又整齐规律的效果，所以在网上找了很久，找到了这个用jQuery插件infinite-scroll和Masonry实现的瀑布流网站，分享给大家。

实现这个效果需要两个jQuery插件infinite-scroll和Masonry。

infinite-scroll-jquery

用于页面的无限滚动，晚上有很多类似的jQ插件，海天对jQ不是很熟，就按人家的来了
参数详解：

$('#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){
//程序执行完的回调函数
});
取消绑定事件的函数写法：$(window).unbind(‘.infscr’); 通过事件触发加载数据的写法： $(document).trigger(‘retrieve.infscr’); //比如加到某个click事件中

此插件还有一个鲜为人知的功能就是可以载入任何页面的选择器中的内容，可以是id以及是class，并转化到html存储。要比jquery自带的的load强大多了。

$('
').load('/page/2/ #content div.post',function(){
$(this).appendTo('#content');
});

官方首页及下载地址: http://www.infinite-scroll.com/

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,//使用从右到左的布局
});
});

官方首页及下载地址：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>

原文见：http://www.xiumu.org/technology/jquery-without-refresh-paging-perfect-waterfall-flow.shtml

原理看这里：http://www.niumowang.org/html-css/jquery-scroll-theorem/