jQuery Masonry瀑布流布局神器使用詳解
最近在做個(gè)網(wǎng)站時(shí)，其中有一部分涉及到很多圖片布局，想采用比較流行的Water Flow布局。
開(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)類似的子元素
<div id="container"> <div class="item">...</div> <div class="item">...</div> <div class="item">...</div> ... </div>
然后在頁(yè)面中添加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來(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í)有所幫助，也希望大家多多支持腳本之家。
- jquery實(shí)現(xiàn)簡(jiǎn)單的瀑布流布局
- 網(wǎng)頁(yè)瀑布流布局jQuery實(shí)現(xiàn)代碼
- 基于jquery實(shí)現(xiàn)瀑布流布局
- jQuery實(shí)現(xiàn)瀑布流布局詳解（PC和移動(dòng)端）
- jQuery+HTML5美女瀑布流布局實(shí)現(xiàn)方法
- Jquery實(shí)現(xiàn)瀑布流布局（備有詳細(xì)注釋）
- jQuery實(shí)現(xiàn)瀑布流布局
- jQuery 瀑布流 絕對(duì)定位布局（二）(延遲AJAX加載圖片)
- jQuery 瀑布流 浮動(dòng)布局（一）(延遲AJAX加載圖片)
- JQuery實(shí)現(xiàn)簡(jiǎn)單瀑布流布局
相關(guān)文章
jQuery實(shí)現(xiàn)帶漸顯效果的人物多級(jí)關(guān)系圖代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶漸顯效果的人物多級(jí)關(guān)系圖,可實(shí)現(xiàn)多種關(guān)系的顯示及點(diǎn)擊后漸顯切換效果,涉及jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)修改頁(yè)面元素顯示效果的相關(guān)技巧,需要的朋友可以參考下2015-10-10
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)下拉框美化特效的示例代碼，以一個(gè)完整的實(shí)例進(jìn)行分析講解，感興趣的小伙伴們可以參考一下2016-02-02
這篇文章主要為大家詳細(xì)介紹了jQuery彈框插件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
Jquery Ajax學(xué)習(xí)實(shí)例6 向WebService發(fā)出請(qǐng)求，返回DataSet(XML) 異步調(diào)用
Jquery Ajax學(xué)習(xí)實(shí)例6 向WebService發(fā)出請(qǐng)求，返回DataSet(XML) 異步調(diào)用實(shí)現(xiàn)代碼，需要的朋友可以參考下。2010-03-03
基于jquery擴(kuò)展漂亮的CheckBox(自己編寫)
默認(rèn)的html復(fù)選框控件樣式可定義相當(dāng)有限，下面就與大家分享下自己編寫的CheckBox控件。喜歡的朋友可以拿去使用2013-11-11
jQuery實(shí)現(xiàn)簡(jiǎn)單下拉導(dǎo)航效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單下拉導(dǎo)航效果,通過(guò)簡(jiǎn)單的元素遍歷與樣式替換實(shí)現(xiàn)下拉導(dǎo)航的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-09-09
jQGrid動(dòng)態(tài)填充select下拉框的選項(xiàng)值(動(dòng)態(tài)填充)
這篇文章主要介紹了jQGrid動(dòng)態(tài)填充select下拉框的選項(xiàng)值(動(dòng)態(tài)填充)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-11-11
這篇文章主要介紹了JQuery中的事件及動(dòng)畫用法,實(shí)例分析了事件的綁定、移除、添加及動(dòng)畫方法操作表單的使用技巧,需要的朋友可以參考下2015-01-01
JQuery頁(yè)面圖片切換和新聞列表滾動(dòng)效果的具體實(shí)現(xiàn)
這篇文章介紹了JQuery頁(yè)面圖片切換和新聞列表滾動(dòng)效果的具體實(shí)現(xiàn)，有需要的朋友可以參考一下2013-09-09
jQuery表格插件ParamQuery簡(jiǎn)單使用方法示例
這篇文章主要介紹了jQuery表格插件ParamQuery簡(jiǎn)單使用方法示例,大家參考使用吧2013-12-12