2013年1月20日 星期日

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

放在<head>.....</head>之間：
放在<body>.....</body>之間： 



內容1



內容2



內容3



內容4



內容5



內容6
CSS樣式設定，放在<head>.....</head>之間：
啟用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 Masonry套件：
外掛元件：jQuery Masonry
外掛版本：v2.1
官方網站：http://masonry.desandro.com/index.html
於
標籤：