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

  • Z时代
  • 2024-01-10
  • 分类：IT

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());
});

相关链接

  • 项目地址：http://suprb.com/apps/gridalicious/

  • Github地址：https://github.com/suprb/Grid-A-Licious

以上是 Grid-A-Licious 基于 jQuery 响应式瀑布流插件 的全部内容， 来源链接： utcz.com/p/231778.html

回到顶部