jQuery响应式飞瀑流布局插件 - Grid-A-Licious

最近瀑布流布局比较流行，那么今天就给大家介绍一个这样的 jQuery 插件 - Grid-A-Licious。

?

?

?

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

如何使用

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

Html代码??

1. <script?src="http://kfxx.info/js/jquery.1.8.0.min.js"></script>??
2. <script?src="http://kfxx.info/js/jquery.grid-a-licious.min.js"></script>??

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

Html代码??

1. <div?id="demo">??
2. <div?class="item">??
3. 演示演示??
4. </div>??
5. ....任意个div??
6. <div?class="item">??
7. <div>测试内容...</div>??
8. </div>??
9. </div>??

最后初始化即可

Js代码??

1. $("#demo").gridalicious({??
2. ????gutter:?10,??
3. ????width:?200,??
4. ????animate:?true,??
5. ????animationOptions:?{??
6. ????????speed:?150,??
7. ????????duration:?300,??
8. ????????complete:?onComplete??
9. ????},??
10. });??

?

演示：?demo

?