图片瀑布流布局

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. 需要显示的内容全放入单元格里,再使用样式设置。这样让更多的设计交给使用者。

更多请点击体验 在线演示