瀑布流
可定制jQuery瀑布流网格布局插件
PetitQ
stackgrid_adem 是一款简单且高度可定制的 jQuery 瀑布流网格布局插件。通过该瀑布流网格插件你可以动态添加和删除各种尺寸的图片，定义图片宽度，设置网格的列数，或使用流式布局方式，甚至还可以通过 URL 动态添加图片。
使用方法：
使用该瀑布流布局插件之前要先引入 jQuery 和 stackgrid.adem.js 文件。
也想出现在这里？联系我们吧
<script src="jquery.min.js"></script>
<script src="stackgrid.adem.js"></script>
HTML 结构：
<div id="grid-container">
<div class="grid-item">...</div>
<div class="grid-item">...</div>
<div class="grid-item">...</div>
</div>
初始化插件：
在确保所有内容都被加载之后，可以通过下面的方法来初始化该瀑布流网格布局插件。一定要确保所有的内容都被加载，这样可以使 stackgrid 计算出正确的高度。
// 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);
});
添加新项：
// Create new grid-item.item = $("<div class=\"grid-item\"> I'm a new grid item. </div>");
// 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);
重新排列：
// 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();
配置参数：
下面是该瀑布流网格布局的可用配置参数。
// 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：网格的宽度。
- gutter：网格之间的间距。
- is_fluid：是否设置为流式布局。流式布局会使网格自适应页面视区宽度。
- is_optimized：该选项设置为 true 可以使垂直的网格优化排序。
- number_of_columns：如果 is_fluid 选项设置为 flase，则使用该选项的值为默认的网格列数。
- resize_delay：改变尺寸后的延迟时间。
- move：自定义什么时候以及如何移动网格。
- scale：该函数用于缩放保存网格的容器。
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
