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

Question

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

相关链接

• 项目地址：http://suprb.com/apps/gridalicious/
• Github地址：https://github.com/suprb/Grid-A-Licious