如何使用jquery.masonry實(shí)現(xiàn)瀑布流效果

這篇文章給大家分享的是有關(guān)如何使用jquery.masonry實(shí)現(xiàn)瀑布流效果的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

一、分別加載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%
}

解釋?zhuān)横槍?duì)第二步的頁(yè)面代碼，我們需要添加一點(diǎn)樣式，.box 類(lèi)我們添加了浮動(dòng)屬性，還設(shè)置了他的寬度。

三、頁(yè)面瀑布流布局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>

解釋?zhuān)?/strong>把每個(gè)小內(nèi)容塊放在一個(gè)擁有相關(guān)類(lèi)的容器里，然后把所有的內(nèi)容塊放在一個(gè)大的容器里，這里我們把內(nèi)容塊圖片放在一個(gè)擁有 .box 類(lèi)的 <div> 標(biāo)簽里，然后把他們又使用帶有 #masonry ID 的 <div> 里面，一會(huì)兒我們會(huì)用 #masonry ID 和 .box 類(lèi)來(lái)觸發(fā)使用瀑布流。

四、初始化瀑布流插件的jquery腳本代碼

$(function(){
 var $container = $('#masonry');
 $container.imagesLoaded( function(){
  $container.masonry({
   itemSelector : '.box',
   gutterWidth : 20,
   isAnimated: true,
  });
 });
});

解釋?zhuān)?/strong>這里我們首先定位想使用瀑布流的大容器是什么，這里就是帶有 #masonry ID 的 <div> 標(biāo)簽，在 var $container = $('#masonry'); 這行代碼中定義。然后我們還要說(shuō)明瀑布流里的每個(gè)內(nèi)容塊容器上共同的類(lèi)是什么，這里就是帶有 .box 類(lèi)的 <div> 標(biāo)簽，在itemSelector : ‘.box', 這行代碼中定義。gutterWidth : 20, 這行代碼定義了內(nèi)容塊之間的距離是 20 像素，isAnimated: true, 這行代碼可以打開(kāi)動(dòng)畫(huà)選項(xiàng)，也就是當(dāng)改變窗口寬度的時(shí)候，每行顯示的內(nèi)容塊的數(shù)量會(huì)有變化，這個(gè)變化會(huì)使用一種動(dòng)畫(huà)效果。

感謝各位的閱讀！關(guān)于“如何使用jquery.masonry實(shí)現(xiàn)瀑布流效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！