pinterest的瀑布流布局風靡了整個互聯網，其實用CSS3很容易實現這個效果。排列順序不是傳統的從左到右然后折行排列，而是先從上到下然后再從左到右。下面就給出實現的代碼和效果圖：
效果圖如下：
代碼如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>布局</title>
<style>
ul{
/* 欄寬度 */
-webkit-column-width:160px;
-moz-column-width:160px;
-o-colum-width:160px;
column-width:160px;
/* 兩欄之間的間距 */
-webkit-column-gap:1px;
-moz-column-gap:1px;
-o-column-gap:1px;
column-gap:1px;
}
li{
background:#0CF;
border:#069 1px solid;
display:inline-block;
width:150px;
margin:5px 0;
}
</style>
</head>
<body>
<ul>
<li style="height:50px">1</li>
<li style="height:100px">2</li>
<li style="height:80px">3</li>
<li style="height:60px">4</li>
<li style="height:70px">5</li>
<li style="height:50px">6</li>
<li style="height:100px">7</li>
<li style="height:80px">8</li>
<li style="height:90px">9</li>
<li style="height:30px">10</li>
</ul>
</body>
</html>