最近在做個(gè)網(wǎng)站時(shí)，其中有一部分涉及到很多圖片布局，想采用比較流行的Water Flow布局。

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

使用方法相當(dāng)簡(jiǎn)單：

1、標(biāo)記需要布局的容器和Item

Masonry需要一個(gè)容器來裝載結(jié)構(gòu)類似的子元素

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

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

<script src="http://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來確定，所有元素必須是浮動(dòng)的
eg:

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

3、編寫腳本

編寫腳本傳入初始化布局參數(shù)，讓容器自動(dòng)布局。
強(qiáng)烈推薦配置itemSelector和columnWidth兩個(gè)參數(shù)。更多參數(shù)配置請(qǐng)查閱官網(wǎng)。

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

OK，到此結(jié)束。So easy~

看看效果吧

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。