用jQuery Masonry 插件創(chuàng)建瀑布流式的頁(yè)面
成都創(chuàng)新互聯(lián)作為成都網(wǎng)站建設(shè)公司，專注網(wǎng)站建設(shè)公司、網(wǎng)站設(shè)計(jì)，有關(guān)成都企業(yè)網(wǎng)站定制方案、改版、費(fèi)用等問題，行業(yè)涉及廣告推廣等多個(gè)領(lǐng)域，已為上千家企業(yè)服務(wù)，得到了客戶的尊重與認(rèn)可。
我們可以使用 jQuery 的 Masonry 插件來實(shí)現(xiàn)這種頁(yè)面形式，下面介紹一下方法。
1、分別下載 jQuery 與 Masonry ，然后把他們都加載到頁(yè)面中使用。
加載代碼：
解釋：很簡(jiǎn)單，就是把下載之后的腳本文件嵌入到你想使用瀑布流形式的頁(yè)面中，注意文件的名稱與路徑，根據(jù)你自己的實(shí)際情況修改。
2、頁(yè)面代碼
...
解釋：把每個(gè)小內(nèi)容塊放在一個(gè)擁有相關(guān)類的容器里，然后把所有的內(nèi)容塊放在一個(gè)大的容器里，這里我們把內(nèi)容塊圖片放在一個(gè)擁有 .box 類的
3,、樣式代碼
重慶分公司
重慶分公司
.container-fluid {
padding: 20px;
}
.box {
margin-bottom: 20px;
float: left;
width: 220px;
}
.box img {
max-width: 100%
}
解釋：針對(duì)第二步的頁(yè)面代碼，我們需要添加一點(diǎn)樣式，.box 類我們添加了浮動(dòng)屬性，還設(shè)置了他的寬度。
4、在頁(yè)面中啟用瀑布流形式的腳本代碼
$(function() {
var $container = $('#masonry');
$container.imagesLoaded(function() {
$container.masonry({
itemSelector: '.box',
gutter: 20,
isAnimated: true,
});
});
});解釋：這里我們首先定位想使用瀑布流的大容器是什么，這里就是帶有 #masonry ID 的
gutter: 20, 這行代碼定義了內(nèi)容塊之間的距離是 20 像素，isAnimated: true, 這行代碼可以打開動(dòng)畫選項(xiàng)，也就是當(dāng)改變窗口寬度的時(shí)候，每行顯示的內(nèi)容塊的數(shù)量會(huì)有變化，這個(gè)變化會(huì)使用一種動(dòng)畫效果。
（感謝網(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)。
