Ublue jQuery Waterfall（瀑布流式布局）

引言：瀑布流式布局（又名：瀑布图片墙），而Pinterest则是该布局的鼻祖。最该布局形式最初在国内默默无闻，但随着蘑菇街、点点和花瓣网等等的兴起...这样的布局方式也渐渐被人们所熟知。可能有人不经意要问，为什么现在越来越多的网站都这样效仿呢？我个人总结了2点：首先，图片+链接的方式，方便了用户浏览，也能清晰找到相关内容，可谓是一目了然。其次，看似散乱无序的碎片化内容，有着强大的视觉感染力。由于内容随机和不确定性，更能够诱导用户反复查看，有时更像是种“探宝”希望找到自己所喜欢的内容。

好了，说了一堆介绍，开始进入正题。其实，这个Demo很早就开始制作了，由于种种原因，一直没能写这文章。由于最近在做一个项目，需要用到这个布局方式，也所谓是不用不知道，一用才知道，看似没什么问题，但在实际应用中，还是有很多问题需要解决。所以，边做项目的同时，也把Demo优化、更新了下。

我写代码有个习惯，要么就是把代码注上相对容易理解的说明，要么就索性什么话都别说。当初在做这个Demo的时候，网上搜了很多资料。都没找到具体的制作方法，国内的网站，要么各种插件要么各种天书。我懂，我就不会去找资料，就是因为我不懂，所以我才去寻找“真相”。这次的代码，我基本都写上了注释。由于我也是从一个新手一步步的过来，所以应该也能易于其他人的理解吧。好了，废话说完，大家看代码吧。

CSS CODE：

*{margin:0px; padding:0px;}
body{ font:12px/20px  "Electrolize","Microsoft YaHei",tahoma,Arial,sans-serif; color:#666; text-shadow:0 1px 0 #FFF; background:url(images/body_bg.png);}
ul,ol,li{ list-style:none;}
a{ color:#666; text-decoration:none;}
a:hover img{ opacity:.9;}

#waterfall{ margin:50px auto; position:relative;}
.picList{ width:222px; box-shadow:0 0 3px #CCC; background:#FFF; margin:0 6px 12px 6px; position:absolute; display:block;}
.picList:hover{ box-shadow:1px 1px 5px #BBB;}
.picList:hover .shareIcon{ display:block;}
.picList .shareIcon{ display:none; width:100px; height:24px; background:url(images/share_icon.png) no-repeat; cursor:pointer; position:absolute; top:11px; right:11px; z-index:2; opacity:.9;}
.picList .shareIcon:hover{ opacity:1;}
.picThumbnail{ border-bottom:1px solid #EEE;}
.picThumbnail a{ display:block; margin:11px; max-height:600px; overflow:hidden;}
.picThumbnail img{ max-width:200px; display: block;}
.picDescription{ padding:1px; text-align:center; padding:5px 10px; background:#F7F7F7; margin-top:1px;}

JQUERY CODE：

$(function(){
	/*!
	* Ublue jQuery Waterfall
	* Create 2012.02.21
	* Update 2012.10.18 ( 1.由于内容是absolute属性，导致元素偏离了文档，嵌入网页时无法撑开父级区域 2. 性能和代码结构优化 3.已知BUG修复)
	* Copyright (c) 2011, 梦幻神化
	* http://www.bluesdream.com
	*/
	function waterfall(){
		var wfArea = $("#waterfall"); //显示区域名称
		var wfList = $(".picList"); //内容区域名称
		var wfWidth = wfList.outerWidth(true); //获取内容区域实际宽度（含Margin值）
		var wfArr = new Array(); //创建数组，用来记录内容区域高度
		var maxCol = Math.floor( $(window).width() / wfWidth ); //窗口的宽度除以内容区域宽度，并且向下取整（得出每行能放多少列）
		for(var i = 0; i < wfList.length; i++) { //根据内容区域数量进行循环
			colHeight = wfList.eq(i).outerHeight(true); //获取每个内容区域的高度
			if( i < maxCol ){ //如果i小于maxCol，那就说明是在一行里面（例如每行有4列，那就是4个为一组）
				wfArr[i] = colHeight; //把每组内容区域的高度，放入到数组中
				wfList.eq(i).css("top",0); //第一行Li的默认Top值为0
				wfList.eq(i).css("left",i * wfWidth); //每个列的Left值就是当前列数*内容区域宽度
			}else{
				minHeight = Math.min.apply(null,wfArr); //比较数值中的值，取得最小值（也就是每行中，最小高度）
				minCol = getArrayKey(wfArr, minHeight); //最小的值对应的指针
				wfArr[minCol] += colHeight; //加上新高度后更新高度值
				wfList.eq(i).css("top",minHeight); //先得到高度最小的Li，然后把接下来的li放到它的下面
				wfList.eq(i).css("left",minCol * wfWidth); //第i个列的左坐标就是i*列的宽度
			}
			wfList.eq(i).attr('id',"post_"+i);
		};
		function getArrayKey(s, v) { //使用for in运算返回数组中某一值的对应项数(比如算出最小的高度值是数组里面的第几个)
			for( k in s ) {
				if( s[k] == v)  {
					return k;
				}
			}
		};
		var fwLastLayerT = parseInt(wfList.last().css("top")); //最后一个元素的Top值
		var fwLastLayerH = wfList.last().outerHeight(true); //最后一个元素的高度
		var wfAreaH = fwLastLayerT + fwLastLayerH + "px"; //显示区域的高度为 最后一个元素的Top值+自身高度
		wfArea.css({ "width":wfWidth * maxCol,"height":wfAreaH }); //设置显示区域宽度和高度
	 }
	window.onload = function() { waterfall(); } //当页面加载完毕，执行函数
	$(window).resize(function(){ //当窗口改变时，执行函数
		waterfall();
	});
});

HTML CODE：

</pre>
<div class="info">
Ublue jQuery Waterfall

By www.bluesdream.com</div>
<div id="waterfall">
<div class="picList"><em class="shareIcon"></em>
<div class="picThumbnail"><a href="#"><img src="images/img29.jpg" alt="" /></a></div>
<div class="picDescription">
图片介绍和描述

作者：Bluesdream.com</div>
</div>
<div class="picList"><em class="shareIcon"></em>
<div class="picThumbnail"><a href="#"><img src="images/img30.jpg" alt="" /></a></div>
<div class="picDescription">
图片介绍和描述

作者：Bluesdream.com</div>
</div>
</div>
<pre>

兼容：IE6-10、Firefox、Chrome、Safari、Opera

说明：Demo1 - 布局效果、Demo2 - 滚动无限加载
提示：Demo2滚动加载，是用JSON获取的数据，请在服务器环境下(IIS或Apache)测试。
提示：Demo3在Demo2的基础上增加瀑布流可显范围的修改提示和增加初次加载时的loading效果。

Demo1Demo2Demo3DownloadGithub