stackgrid.adem.js是一款简单且高度可定制的 jQuery 瀑布流网格布局插件。通过该瀑布流网格插件你可以动态添加和删除各种尺寸的图片,定义图片宽度,设置网格的列数,或使用流式布局方式,甚至还可以通过URL动态添加图片。
使用方法
使用该瀑布流布局插件之前要先引入jQuery和stackgrid.adem.js文件。
<script src="jquery.min.js"></script> <script src="stackgrid.adem.js"></script>
HTML结构
该瀑布流网格布局插件使用的是嵌套<div>
的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:该函数用于缩放保存网格的容器。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!