溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
用jQuery Masonry 插件創建瀑布流式的頁面
我們可以使用 jQuery 的 Masonry 插件來實現這種頁面形式，下面介紹一下方法。
1、分別下載 jQuery 與 Masonry ，然后把他們都加載到頁面中使用。
加載代碼：
<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>
解釋：很簡單，就是把下載之后的腳本文件嵌入到你想使用瀑布流形式的頁面中，注意文件的名稱與路徑，根據你自己的實際情況修改。
2、頁面代碼
<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>
解釋：把每個小內容塊放在一個擁有相關類的容器里，然后把所有的內容塊放在一個大的容器里，這里我們把內容塊圖片放在一個擁有 .box 類的 <div> 標簽里，然后把他們又使用帶有 #masonry ID 的 <div> 里面，一會兒我們會用 #masonry ID 和 .box 類來觸發使用瀑布流。
3,、樣式代碼
.container-fluid {
padding: 20px;
}
.box {
margin-bottom: 20px;
float: left;
width: 220px;
}
.box img {
max-width: 100%
}
解釋：針對第二步的頁面代碼，我們需要添加一點樣式，.box 類我們添加了浮動屬性，還設置了他的寬度。
4、在頁面中啟用瀑布流形式的腳本代碼
$(function() {
var $container = $('#masonry');
$container.imagesLoaded(function() {
$container.masonry({
itemSelector: '.box',
gutter: 20,
isAnimated: true,
});
});
});
解釋：這里我們首先定位想使用瀑布流的大容器是什么，這里就是帶有 #masonry ID 的 <div> 標簽，在 var $container = $('#masonry'); 這行代碼中定義。然后我們還要說明瀑布流里的每個內容塊容器上共同的類是什么，這里就是帶有 .box 類的 <div> 標簽，在itemSelector : '.box', 這行代碼中定義。
gutter: 20, 這行代碼定義了內容塊之間的距離是 20 像素，isAnimated: true, 這行代碼可以打開動畫選項，也就是當改變窗口寬度的時候，每行顯示的內容塊的數量會有變化，這個變化會使用一種動畫效果。
（感謝網友阿富）提供不居中顯示！
我的一個笨方法：
$(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
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
