jquery.masonry瀑布流效果
一、分別加載jquery插件與jquery.masonry插件
<script src="js/jquery-1.8.1.min.js"></script> <script src="js/jquery.masonry.min.js"></script>
二、瀑布流局部樣式代碼
.container-fluid { padding: 20px; } .box { margin-bottom: 20px; float: left; width: 220px; } .box img { max-width: 100% }
解釋:針對(duì)第二步的頁面代碼,我們需要添加一點(diǎn)樣式,.box 類我們添加了浮動(dòng)屬性,還設(shè)置了他的寬度。
三、頁面瀑布流布局html代碼
<div id="masonry" class="container-fluid"> <div class="box"><img src="images/1.jpg"></div> <div class="box"><img src="images/2.jpg"></div> <div class="box"><img src="images/3.jpg"></div> <div class="box"><img src="images/4.jpg"></div> <div class="box"><img src="images/5.jpg"></div> </div>
解釋:把每個(gè)小內(nèi)容塊放在一個(gè)擁有相關(guān)類的容器里,然后把所有的內(nèi)容塊放在一個(gè)大的容器里,這里我們把內(nèi)容塊圖片放在一個(gè)擁有 .box 類的 <div> 標(biāo)簽里,然后把他們又使用帶有 #masonry ID 的 <div> 里面,一會(huì)兒我們會(huì)用 #masonry ID 和 .box 類來觸發(fā)使用瀑布流。
四、初始化瀑布流插件的jquery腳本代碼
$(function(){ var $container = $('#masonry'); $container.imagesLoaded( function(){ $container.masonry({ itemSelector : '.box', gutterWidth : 20, isAnimated: true, }); }); });
解釋:這里我們首先定位想使用瀑布流的大容器是什么,這里就是帶有 #masonry ID 的 <div> 標(biāo)簽,在 var $container = $('#masonry'); 這行代碼中定義。然后我們還要說明瀑布流里的每個(gè)內(nèi)容塊容器上共同的類是什么,這里就是帶有 .box 類的 <div> 標(biāo)簽,在itemSelector : ‘.box', 這行代碼中定義。gutterWidth : 20, 這行代碼定義了內(nèi)容塊之間的距離是 20 像素,isAnimated: true, 這行代碼可以打開動(dòng)畫選項(xiàng),也就是當(dāng)改變窗口寬度的時(shí)候,每行顯示的內(nèi)容塊的數(shù)量會(huì)有變化,這個(gè)變化會(huì)使用一種動(dòng)畫效果。
demo下載地址 瀑布流
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Jquery 動(dòng)態(tài)添加元素并添加點(diǎn)擊事件實(shí)現(xiàn)過程解析
這篇文章主要介紹了Jquery 動(dòng)態(tài)添加元素并添加點(diǎn)擊事件實(shí)現(xiàn)過程解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10Jquery中的$.each獲取各種返回類型數(shù)據(jù)的使用方法
each()方法能使DOM循環(huán)結(jié)構(gòu)簡(jiǎn)潔,不容易出錯(cuò)。each()函數(shù)封裝了十分強(qiáng)大的遍歷功能,使用也很方便,它可以遍歷一維數(shù)組、多維數(shù)組、DOM, JSON 等等,在javaScript開發(fā)過程中使用$each可以大大的減輕我們的工作量。2015-05-05JQuery 獲取多個(gè)select標(biāo)簽option的text內(nèi)容(實(shí)例)
下面小編就為大家?guī)硪黄狫Query 獲取多個(gè)select標(biāo)簽option的text內(nèi)容(實(shí)例)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09js獲取通過ajax返回的map型的JSONArray的方法
下面是js獲取通過ajax返回的map型的JSONArray的詳細(xì)代碼,需要的朋友可以參考下2014-01-01使用element-ui的el-menu導(dǎo)航選中后刷新頁面保持當(dāng)前選中狀態(tài)
這篇文章主要介紹了使用element-ui的el-menu導(dǎo)航選中后刷新頁面保持當(dāng)前選中狀態(tài),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07jQuery仿360導(dǎo)航頁圖標(biāo)拖動(dòng)排序效果代碼分享
這篇文章主要為大家詳細(xì)介紹了360導(dǎo)航頁圖標(biāo)拖動(dòng)排序效果代碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-08-08jQuery實(shí)現(xiàn)的簡(jiǎn)單手風(fēng)琴效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡(jiǎn)單手風(fēng)琴效果,結(jié)合實(shí)例形式分析了jQuery基于事件響應(yīng)、頁面元素屬性動(dòng)態(tài)操作實(shí)現(xiàn)手風(fēng)琴效果的方法,需要的朋友可以參考下2018-08-08