css:

#main{	width:956px;	height: auto;	margin: 10px auto 0px auto;	border:2px solid #ccc;	float:left;	position:relative;}#main .pin{	width:220px;	height:auto;	padding:15px 0px 0px 15px;	float:left;}#main .pin .box{	width:203px;	height:auto;	padding:10px;	border:1px solid #333;	box-shadow:0px 0px 5px #333;}#main .pin .box img{	width:100%;}

jquery:如果你想测试请将第一行function waterfall()换成$(function(){})再运行，我这里将其封装成函数;

//瀑布流	function waterfall(){		var apin = $('#main .pin');		var oparent = $('#main');		var pos=[];		apin.each(function(i){			//4是第一排的元素个数			if(i<4){				//将第一排的高度存入到数组中				pos[i] = apin.eq(i).innerHeight();			}else{				//按照瀑布流定位				//获取数组中的最小值				var minh = Math.min.apply({},pos);				//获取高度最小的键名				var mink = getMinKey(pos,minh);				//获取高度最小的距离左边的距离				var minl = apin[mink].offsetLeft;				//定位元素位置				apin.eq(i).css({					position:'absolute',					top:minh,					left:minl				});				//将加入的元素与其上面元素的高度相加，为下面元素排列做准备				pos[mink] +=apin.eq(i).innerHeight();									}							});		//设置最外容器的高以适应内容的变化		var maxh = Math.max.apply({},pos)+10;		oparent.css('height',maxh)			}	//获取数组中最小元素的键名		function getMinKey(arr,min){			for(var key in arr){				if(arr[key]==min){					return key;				}			}		}

html:

<div id="main">		<div class="pin">			<div class="box">				<img src=http://www.mamicode.com/"./11.jpg">>