Javascript, 網頁設計

jQuery外掛-jQuery Masonry瀑布流版型套件

梅干 2012/12/27
梅問題-jQuery外掛-jQuery Masonry瀑布流版型編排
  前陣子看到有不少的網站,將網站中的Div區塊,隨著Div的高度,自行的向下編排,看起來蠻有雜誌的感覺,而這種編排方式,中文叫作瀑布流版型,原因就在於,它會先取出Div的寬高,再依序的向下排列,就像瀑布一樣,看起來很像是CSS的浮動排版一樣,昨天看到好友哇哇的網站,也將首頁改成這種瀑布流版型,由於哇哇的圖有大有小,整個排起來特別的有fu。
  雖然很有fu,但因為這種曝布流版型,會先取出Div的高度,再去計算出每個Div的位置,所以一旦圖片比較晚載入,而程式已取出Div高度時,就會發生兩個區塊重疊的冏境,雖然這種瀑布流版型,可用CSS3中的column-count來完成,但IE要10.0才有支援XD~,所以只好利用jQuery的Masonry外掛元件來完成,且只要簡單的設定參數,立即就可套用囉!喜歡這效果的朋友參考看看囉!改天梅干再來分享CSS3的版本,更簡單更ez。
jQuery Masonry套件:
外掛元件:jQuery Masonry
外掛版本:v2.1
官方網站:http://masonry.desandro.com/index.html
※需載入jQuery1.7+以上

引用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="https://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:動態效果

結果預覽:
梅問題-jQuery外掛-jQuery Masonry瀑布流版型編排
[範例預覽] [範例下載]