jQuery Masonry瀑布流佈局詳解

本文主要為大家詳細介紹了jQuery Masonry瀑布流佈局神器的使用方法，具有一定的參考價值，有興趣的小伙伴們可以參考一下，希望能幫助到大家。

最近在做網站時，其中有一部分牽涉到許多圖片佈局，想採用比較流行的Water Flow佈局。

開始的時候自己動手寫的，真費事情，沒有考慮檢測圖片大小，雖然也能達到佈局效果，但是圖片有的本身尺寸比較小卻被強行拉大了，看起來很不和諧。後來上網收了一下，原來有很好的Water Flow佈局工具使用。下面來認識這個神器吧~
神器名稱：JQuery Masonry , 網址：http://masonry.desandro.com/index.html

使用方法相當簡單：

1、標記需要佈局的容器和Item

Masonry需要一個容器來裝載結構類似的子元素

<p id="container"> 
 <p class="item">...</p> 
 <p class="item">...</p> 
 <p class="item">...</p> 
 ... 
</p>

然後在頁面中加入Jquery和Masonry腳本引用，要求jquery版本在1.6+

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script src="/path/to/jquery.masonry.min.js"></script>

#2、寫CSS

所有需要佈局的元素大小由CSS來決定，所有元素必須是浮動的
eg:

.item { 
 width: 220px; 
 margin: 10px; 
 float: left; 
}

3、寫腳本

編寫腳本傳入初始化佈局參數，讓容器自動佈局。
強烈建議配置itemSelector和columnWidth兩個參數。更多參數配置請查閱官網。

$(function(){ 
 $('#container').masonry({ 
  // options 
  itemSelector : '.item', 
  columnWidth : 240 
 }); 
});

OK，到此結束。 So easy~

看看效果吧

#相關推薦：

jQuery.lazyload+ masonry改良圖片瀑布流程式碼_圖象特效

jQuery Masonry瀑布流外掛程式使用詳解_jquery

JS實作瀑布流佈局的實例分析

以上是jQuery Masonry瀑布流佈局詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！