jQueryMasonry瀑布流插件使用方法詳解

用jQuery Masonry 插件創(chuàng)建瀑布流式的頁(yè)面

成都創(chuàng)新互聯(lián)作為成都網(wǎng)站建設(shè)公司，專(zhuān)注網(wǎng)站建設(shè)公司、網(wǎng)站設(shè)計(jì)，有關(guān)成都企業(yè)網(wǎng)站定制方案、改版、費(fèi)用等問(wèn)題，行業(yè)涉及廣告推廣等多個(gè)領(lǐng)域，已為上千家企業(yè)服務(wù)，得到了客戶(hù)的尊重與認(rèn)可。

我們可以使用 jQuery 的 Masonry 插件來(lái)實(shí)現(xiàn)這種頁(yè)面形式，下面介紹一下方法。

1、分別下載 jQuery 與 Masonry ，然后把他們都加載到頁(yè)面中使用。

加載代碼：

<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script src="http://jq22.qiniudn.com/masonry-docs.min.js"></script>

解釋?zhuān)汉芎?jiǎn)單，就是把下載之后的腳本文件嵌入到你想使用瀑布流形式的頁(yè)面中，注意文件的名稱(chēng)與路徑，根據(jù)你自己的實(shí)際情況修改。

2、頁(yè)面代碼

<div id="masonry" class="container-fluid">
 <div class="box"><img src="http://jq22.com/images/1.jpg"></div>
 <div class="box"><img src="http://jq22.com/images/2.jpg"></div>
 <div class="box"><img src="http://jq22.com/images/3.jpg"></div>
 <div class="box"><img src="http://jq22.com/images/4.jpg"></div>
 <div class="box"><img src="http://jq22.com/images/5.jpg"></div>
 ...
</div>

解釋?zhuān)喊衙總€(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ā)使用瀑布流。

3,、樣式代碼

.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è)置了他的寬度。

4、在頁(yè)面中啟用瀑布流形式的腳本代碼

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

解釋?zhuān)哼@里我們首先定位想使用瀑布流的大容器是什么，這里就是帶有 #masonry ID 的 <div> 標(biāo)簽，在 var $container = $('#masonry'); 這行代碼中定義。然后我們還要說(shuō)明瀑布流里的每個(gè)內(nèi)容塊容器上共同的類(lèi)是什么，這里就是帶有 .box 類(lèi)的 <div> 標(biāo)簽，在itemSelector : '.box', 這行代碼中定義。

gutter: 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à)效果。

（感謝網(wǎng)友阿富）提供不居中顯示！

我的一個(gè)笨方法：

$(function() {
 var $objbox = $("#masonry");
 var gutter = 25;
 var centerFunc, $top0;
 $objbox.imagesLoaded(function() {
  $objbox.masonry({
   itemSelector: "#masonry > .box",
   gutter: gutter,
   isAnimated: true
  });
  centerFunc = function() {
   $top0 = $objbox.children("[style*='top: 0']");
   $objbox.css("left", ($objbox.width() - ($top0.width() * $top0.length + gutter * ($top0.length - 1))) / 2).parent().css("overflow", "hidden");
  };
  centerFunc();
 });
 var tur = true;
 $(window).resize(function() {
  if (tur) {
   setTimeout(function() {
    tur = true;
    centerFunc();
   },
   1000);
   tur = false;
  }
 });
});

源碼下載：http://xiazai.jb51.net/201701/yuanma/jquerymasonry(jb51.net).rar

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

分享題目：jQueryMasonry瀑布流插件使用方法詳解
網(wǎng)站鏈接：http://muchs.cn/article10/ipicgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、網(wǎng)站排名、品牌網(wǎng)站建設(shè)、ChatGPT、網(wǎng)頁(yè)設(shè)計(jì)公司、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)