瀑布流佈局神器——JQuery Masonry

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

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

神器名稱：JQuery Masonry , 網址：http://masonry.desandro.com/index.html

使用方法相當簡單：

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

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

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

然後在頁面中添加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~

---------------------------------------------------------------------------------------------------------------

看看效果吧