插件描述：一款簡單且高度可定制的jQuery瀑布流網(wǎng)格布局插件。通過該瀑布流網(wǎng)格插件你可以動態(tài)添加和刪除各種尺寸的圖片，定義圖片寬度，設(shè)置網(wǎng)格的列數(shù)，或使用流式布局方式，甚至還可以通過URL動態(tài)添加圖片。

使用該瀑布流布局插件之前要先引入jQuery和stackgrid.adem.js文件。

HTML結(jié)構(gòu)

該瀑布流網(wǎng)格布局插件使用的是嵌套

的HTML結(jié)構(gòu)。.........

初始化插件

在確保所有內(nèi)容都被加載之后，可以通過下面的方法來初始化該瀑布流網(wǎng)格布局插件。一定要確保所有的內(nèi)容都被加載，這樣可以使stackgrid計(jì)算出正確的高度。// Create a stackgrid object.

var stackgrid = new $.stackgrid;

var options = {

column_width: 320

};

// Wrap the initializer inside window on load to

// make sure to wait until all the grid contents are loaded.

var $window = $(window);

$window.on('load', function(){

// Initialize stackgrid!

// The first two arguments are for the container selector and the item selector.

stackgrid.initialize('#grid-container', '.grid-item', options);

});

添加新的網(wǎng)格

該瀑布流網(wǎng)格布局插件允許你動態(tài)的添加新的網(wǎng)格。并且這個(gè)過程不需要重新繪制所有的網(wǎng)格。// Create new grid-item.

item = $("

I'm a new grid item. ");

// Append it to the grid-container.

item.appendTo("#grid-container");

// *** If the new content has image(s), make sure it's loaded first before appending!

// Append to stackgrid!

stackgrid.append(item);

重新排列網(wǎng)格// Restack the grid to apply your config changes.

stackgrid.config.is_fluid = false;

stackgrid.restack();

// Certain changes require you to reset the grid.

// These are changes that affect the dimensions of the grid-item or

// if you remove any of the items.

stackgrid.config.column_width = 400;

stackgrid.reset();

stackgrid.restack();

配置參數(shù)

下面是該瀑布流網(wǎng)格布局的可用配置參數(shù)。// The values shown here are the default ones.

stackgrid.config = {

// Your column width.

column_width: 320,

// Adjust spacing in-between grid-items.

gutter: 20,

// Set this as true to let stackgrid automatically

// determine the number of columns based on the

// viewport's width.

is_fluid: true,

// Set this as true to sort the grid in an vertically optimal way.

is_optimized: true,

// If is_fluid is false, it will

// use this as the default number of columns.

number_of_columns: 4,

// Timeout delay to call the resize complete function.

resize_delay: 300,

// You can customize when and how each item is moved!

// Make sure to use jQuery stop() function if you decide to

// animate it.

// Where you place the callback determines

// when the next move operation is called.

move: function(element, left, top, callback) {

element.css({

left: left,

top: top

)};

callback();

},

// This function is used to scale the container containing

// the grid-items.

// The callback function starts the move operations.

scale: function(element, width, height, callback) {

element.css({

height: height,

width: width

});

callback();

}

};

column_width：網(wǎng)格的寬度。

gutter：網(wǎng)格之間的間距。

is_fluid：是否設(shè)置為流式布局。流式布局會使網(wǎng)格自適應(yīng)頁面視區(qū)寬度。

is_optimized：該選項(xiàng)設(shè)置為true可以使垂直的網(wǎng)格優(yōu)化排序。

number_of_columns：如果is_fluid選項(xiàng)設(shè)置為flase，則使用該選項(xiàng)的值為默認(rèn)的網(wǎng)格列數(shù)。

resize_delay：改變尺寸后的延遲時(shí)間。

move：自定義什么時(shí)候以及如何移動網(wǎng)格。

scale：該函數(shù)用于縮放保存網(wǎng)格的容器。

總結(jié)

以上是生活随笔為你收集整理的html流式布局插件,Jquery瀑布流网格布局插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。