之前曾分享過，利用jQuery套件製作瀑布流的網頁版型，相關文章請見「jQuery Masonry瀑布流版型套件」，這個瀑布流的版型，打破了以往傳統的編排模式，讓每個Div可以隨著高度，自行的向上靠齊，讓畫面變得更有變化性，除了用jQuery的套件來製作外，其實也可透過CSS3的方式來製作，方法更簡單，語法更簡潔，就可以達到相同的效果，與jQuery最大的差別就在於，CSS3需要IE10.0才有支援。
透過CSS3產生的瀑布流版型，會比jQuery來的更即時，不會一開始會先集中在一起，等到計算出每個Div的高度後，再組合起來，但經CSS3部分，就不會有此問題，且無論圖片載入快慢，都不會出現Div重疊的問題，而CSS3有許多相當方便的語法，但都礙於IE的限制，使得網頁設計起來綁手綁腳的，因此當要使用CSS3來打造時，可要先觀查一下，網站的使用者，習慣用什麼樣瀏覽器，若是以IE為首的話，建議還是先採用jQuery的方式，若不是的話，那就恭喜你，可放心的使用啦！
CSS3－column-count：
支援瀏覽器：Chrome、Firefox、Safari、Oprea、IE10.0
CSS3－column-count語法說明：
column-width：欄位寬度
column-gap： 欄位間距
column-rule：欄位格線
CSS3－column-count實作：
#css：
#outbox{
-moz-column-count: 2;
-moz-column-gap: 10px;
-webkit-column-count: 2;
-webkit-column-gap: 10px;
column-count: 2;
column-gap: 10px;
width:734px;
margin:0 auto;
}
.content_box{
width:337px;
display: inline-block;
font-size:12px;
border: 1px dotted #4F4F4F;
padding: 10px;
margin: 5px 5px 5px 0;
overflow:hidden;
font-size:15px;
line-height: 1.5em;
letter-spacing: 1pt;
color:#353535;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#html：
<div id=“outbox”> <div class=“content_box”>1</div> <div class=“content_box”>2</div> <div class=“content_box”>3</div> <div class=“content_box”>4</div>
</div>
[範例預覽] [範例下載]