Jquery瀑布流网格布局插件

所属分类：UI,媒体-布局,图片展示,图像

52212 545 查看评论 (10)

分享到微信朋友圈

查看演示立即下载

插件描述：一款简单且高度可定制的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：该函数用于缩放保存网格的容器。

JBox-v2.3修改版

产品种类多层轮播展示控件