插件描述：用jQuery Masonry 插件創建瀑布流式的頁面

我們可以使用 jQuery 的 Masonry 插件來實現這種頁面形式，下面介紹一下方法。

1,分別下載 jQuery 與 Masonry ，然后把他們都加載到頁面中使用。

加載代碼：

解釋：很簡單，就是把下載之后的腳本文件嵌入到你想使用瀑布流形式的頁面中，注意文件的名稱與路徑，根據你自己的實際情況修改。

2,頁面代碼

...

解釋：把每個小內容塊放在一個擁有相關類的容器里，然后把所有的內容塊放在一個大的容器里，這里我們把內容塊圖片放在一個擁有 .box 類的

標簽里，然后把他們又使用帶有 #masonry ID 的 里面，一會兒我們會用 #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 的

標簽，在 var $container = $('#masonry'); 這行代碼中定義。然后我們還要說明瀑布流里的每個內容塊容器上共同的類是什么，這里就是帶有 .box 類的 標簽，在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;

}

});

});

總結

以上是生活随笔為你收集整理的android瀑布流插件,jQuery瀑布流插件 Masonry的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。