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

目前創(chuàng)新互聯(lián)公司已為1000多家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬空間、網(wǎng)站運(yùn)營(yíng)、企業(yè)網(wǎng)站設(shè)計(jì)、泉州網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

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

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

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

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

 
 
...
 
 
...
 
 
...
 
 ... 
 

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

2、編寫CSS

所有需要布局的元素大小由CSS來(lái)確定，所有元素必須是浮動(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í)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。