所有分类
  • 所有分类
  • 最新发布
  • WordPress主题
  • WordPress插件
  • WordPress汉化
  • HTML5/模板
  • Code/特效
  • 瀑布流
  • 导航菜单

可定制jQuery瀑布流网格布局插件-stackgrid_adem

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:该函数用于缩放保存网格的容器。

原文链接:https://www.7zt.cn/211.html,转载请注明出处~~~

0
广告位招租

评论0

请先

疫情期间优惠活动!本站包年VIP,特惠价:58元;本站终身VIP,特惠价:88元。随着资源不断增多,随时提价!立即查看
显示验证码
没有账号? 注册  忘记密码?

社交账号快速登录