欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery Masonry瀑布流布局神器使用詳解

 更新時間：2017年05月25日 09:08:41   作者：PlusPlus1  
這篇文章主要為大家詳細(xì)介紹了jQuery Masonry瀑布流布局神器的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

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

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

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

Masonry需要一個容器來裝載結(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來確定，所有元素必須是浮動的
eg:

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

3、編寫腳本

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

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

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

看看效果吧

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論