前陣子看到有不少的網站，將網站中的Div區塊，隨著Div的高度，自行的向下編排，看起來蠻有雜誌的感覺，而這種編排方式，中文叫作瀑布流版型，原因就在於，它會先取出Div的寬高，再依序的向下排列，就像瀑布一樣，看起來很像是CSS的浮動排版一樣，昨天看到好友哇哇的網站，也將首頁改成這種瀑布流版型，由於哇哇的圖有大有小，整個排起來特別的有fu。
雖然很有fu，但因為這種曝布流版型，會先取出Div的高度，再去計算出每個Div的位置，所以一旦圖片比較晚載入，而程式已取出Div高度時，就會發生兩個區塊重疊的冏境，雖然這種瀑布流版型，可用CSS3中的column-count來完成，但IE要10.0才有支援XD~，所以只好利用jQuery的Masonry外掛元件來完成，且只要簡單的設定參數，立即就可套用囉！喜歡這效果的朋友參考看看囉!改天梅干再來分享CSS3的版本，更簡單更ez。
jQuery Masonry套件：
引用Jquery+jQuery Masonry：
放在<head>…..</head>之間：
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type=“text/javascript”></script> <script type=“text/javascript” src=“http://masonry.desandro.com/jquery.masonry.min.js"></script>
HTML：
放在<body>…..</body>之間：
<div id=”_container” style=“height:800px; width:728px; overflow:hidden; margin:0 auto;”>
<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 class=“content_box”>內容5</div>
<div class=“content_box”>內容6</div>
</div>
CSS樣式設定：
放在<head>…..</head>之間：
.content_box{
display: inline-block;
border: 1px dotted #4F4F4F;
padding: 10px;
margin: 5px 5px 5px 0;
overflow:hidden;
width:337px;
}
啟用Jquery Masonry元件：
放在<script>…..</script>之下：
$(function(){
$(‘#_container’).imagesLoaded(function () {
$(‘#_container’).masonry({
itemSelector: ‘.content_box’,
columnWidth: 364,
animate:true
});
});
});
Jquery Masonry參數說明：
imagesLoaded：用來防止計算圖片寬度和高度的錯誤
itemSelector：要套用效果的DIV
columnWidth：欄位寬度，當圖片載入失敗，或是還沒載入時，預設的寬高會以這為主
animate：動態效果
itemSelector：要套用效果的DIV
columnWidth：欄位寬度，當圖片載入失敗，或是還沒載入時，預設的寬高會以這為主
animate：動態效果
結果預覽：
[範例預覽] [範例下載]