jQuery-waterfall 图片瀑布流布局

版本：1.0.57
更新：2013.05.07
下载：waterfall-v1.0.57.rar
演示：在线演示
应用：我不忙图片分享

	$(document).ready(function(){	
		loadData(); //首次加载		
	});
	$.scrollBottom(function(){
		loadData(); //滚动条到底部加载
	}); 
	function loadData(){
		...省略代码...
		var arrCells = [];
		...省略代码...
		$("div#container").waterfall(arrCells);
	};

在线演示

var opt = {	//用户自定义配置
   cellWidth: 190,			//单元格宽度
   cellMargin: 10,			//单元格边距
   showFade: true,			//渐显效果
   showFadeSpeed: 600,			//渐显效果速度
   insertToShort: true,			//往短的列插入，不设置等待图片时会有误差
   waitImage:true			//等待图片加载完再插入，因网络问题会造成卡
 
};

1. 计算容器宽度得出列的总数，向容器创建若干列，每列左浮动排列。此方法不需要计算每个单元格的坐标。
2. 创建单元格，计算每个单元格插入相对应的列。可从左到右插入，也可以往最短的列插入。
3. 需要显示的内容全放入单元格里，再使用样式设置。这样让更多的设计交给使用者。

更多请点击体验 在线演示