前端之masonry（圖片瀑布流插件）
阿新 • • 發佈：2018-06-25
IT left window con mar 什麽 lse 我們 anim
加載代碼：
| 1 2 |
<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,頁面代碼
| 1 2 3 4 5 6 7 8 |
<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,樣式代碼
| 1 2 3 4 5 6 7 8 9 10 11 |
.container-fluid {
padding: 20px;
}
.box {
margin-bottom: 20px;
float: left;
width: 220px;
}
.box img {
max-width: 100%
}
|
解釋：針對第二步的頁面代碼，我們需要添加一點樣式，.box 類我們添加了浮動屬性，還設置了他的寬度。
4，在頁面中啟用瀑布流形式的腳本代碼
| 1 2 3 4 5 6 7 8 9 10 |
$(function() {
var $container = $(‘#masonry‘);
$container.imagesLoaded(function() {
$container.masonry({
itemSelector: ‘.box‘,
gutter: 20,
isAnimated: true,
});
});
});<br>
|
解釋：這裏我們首先定位想使用瀑布流的大容器是什麽，這裏就是帶有 #masonry ID 的 <div> 標簽，在 var $container = $(‘#masonry‘); 這行代碼中定義。然後我們還要說明瀑布流裏的每個內容塊容器上共同的類是什麽，這裏就是帶有 .box 類的 <div> 標簽，在itemSelector : ‘.box‘, 這行代碼中定義。
gutter: 20, 這行代碼定義了內容塊之間的距離是 20 像素，isAnimated: true, 這行代碼可以打開動畫選項，也就是當改變窗口寬度的時候，每行顯示的內容塊的數量會有變化，這個變化會使用一種動畫效果。
不居中顯示的解決方法：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
$(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;
}
});
});
|
前端之masonry（圖片瀑布流插件）