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

发布于 2017-12-10 23:24:32 字数 3111 浏览 2325 评论 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
	}
});

可选参数

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

动画参数

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

动态添加 item

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

相关链接

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

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

列表为空,暂无数据

关于作者

JSmiles

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

0 文章
0 评论
84935 人气
更多

推荐作者

淹不死的鱼

文章 0 评论 0

zhangMack

文章 0 评论 0

爱的故事

文章 0 评论 0

linces

文章 0 评论 0

早乙女

文章 0 评论 0

鸵鸟症

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。