Grid-A-Licious 基于 jQuery 响应式瀑布流插件 - 文章教程

Grid-A-Licious 基于 jQuery 响应式瀑布流插件

发布于 2017-12-10 字数 3354 浏览 2075 评论 0

Grid-A-Licious 是一个简单易用的 jQuery 插件,可用于创建响应式瀑布流布局,针对不同设备可自动适应宽度。你可以通过参数设置它的宽度以及动态显示时的速度、延迟等等,定制性是比较高的。

Grid-A-Licious 基于 jQuery 响应式瀑布流插件

如何使用

首先在 HTML 页面头部中引入 jQuery 框架和 Grid-A-Licious 插件

<script src="jquery.1.8.0.min.js"></script>
<script src="jquery.grid-a-licious.min.js"></script>

然后按如下方式添加内容,可自定义设置item样式

<div id="demo">
	<div>
		演示演示
		</div>
			任意个div
		<div>
		<div>测试内容...</div>
	</div>
</div>

最后初始化即可

$("#demo").gridalicious({
	gutter: 10,
	width: 200,
	animate: true,
	animationOptions: {
		speed: 150,
		duration: 300,
		complete: onComplete
	}
});

可选参数

参数名 默认值 可选值 描述 示例
width 225px
$("#container").gridalicious({
  width: 225
});
gutter 20px
$("#container").gridalicious({
  gutter: 20
});
selector .item
$("#container").gridalicious({
  selector: '.item'
});
animate false
$("#container").gridalicious({
  animate: false
});
animationOption 225px 动画选项
$("#container").gridalicious({
  animate: true,
  animationOptions: { […] }
});

动画参数

参数名 默认值 描述
queue 列队显示 true
speed 显示每个item的时间 200
duration 动画执行的时间 300
effect item 显示的方式,目前只支持 fadeInOnAppear ,更多特效正在添加中… fadeInOnAppear
complete 动画完成以后的回调函数 function()

动态添加 item

$('#prepend').click(function(){
   $("#example3").gridalicious('prepend', makeboxes());
});
$('#append').click(function(){
   $("#example3").gridalicious('append', makeboxes());
});

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

佚名

文章 0 评论 0

文江

文章 0 评论 0

2012013325

文章 0 评论 0

女中豪杰

文章 2 评论 0