js 網頁開發

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=“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:動態效果

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