高度可定制的jQuery瀑布流网格布局插件

2021-07-22 987
查看演示
下载不了?请联系网站客服提交链接错误!
增值服务:

高度可定制的jQuery瀑布流网格布局插件

郑重承诺丨新科源码提供安全交易、信息保真!
增值服务:
源码教程
安装指导
环境配置
模板安装
网站建设
二次开发
¥ 0 金币 开通VIP尊享优惠特权
立即下载 查看演示 升级会员
详情介绍

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

高度可定制的jQuery瀑布流网格布局插件

资源下载此资源仅限注册用户下载,请先
收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

声明:1、本站资源均来源于用户上传和网络传播,因此不包含技术服务,请大家谅解!2、本站所有资源仅可用于学习交流,若有商业用途之需,请购买正版,否则产生的一切后果将由下载用户本人自行承担。3、本站资源均来源于用户上传和网络传播,如侵犯您的权益,请务必联系客服(E-mail: 469663672@qq.com)删除。4、本站不保证所提供资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!5、本站资源均来源于用户上传和网络传播,仅供学习交流、参考和研究,请理解这个概念,所以不能保证每个细节都符合您的需求,也可能存在未知的BUG与瑕疵,因本站资源均为可复制品,所以不支持任何理由的退款,请知悉后再支付下载!

新科源码 网页素材 高度可定制的jQuery瀑布流网格布局插件 https://www.xinke123.net/196.html

常见问题
  • 因为源码、模板和插件等资源具有可复制性、可传播性,仅用于学习研究,不可商用,订单一旦生效,不支持退换,所以请您务必看清楚后再购买。
查看详情
  • 我们承诺资源均和演示效果图一样,如有不同,全额退款,并且我们的源码和模板都没有留后门,请放心使用。
查看详情

相关文章

评论
暂无评论