瀑布流，並且解決定位和容器高度自適應問題，隨意放哪都可以用。

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="./11.jpg"></img>
			</div>
		</div>
		<div class="pin">
			<div class="box">
				<img src="./2.jpg"></img>
			</div>
		</div>
</div>