最近瀑布流布局比较流行,那么今天就给大家介绍一个这样的 jQuery 插件 - Grid-A-Licious。
Grid-A-Licious 是一个简单易用的 jQuery 插件,可用于创建响应式瀑布流布局,针对不同设备可自动适应宽度。你可以通过参数设置它的宽度以及动态显示时的速度、延迟等等,定制性是比较高的。
如何使用
首先在 HTML 页面头部中引入 jQuery 框架和 Grid-A-Licious 插件
- <script src="http://kfxx.info/js/jquery.1.8.0.min.js"></script>
- <script src="http://kfxx.info/js/jquery.grid-a-licious.min.js"></script>
然后按如下方式添加内容,可自定义设置item样式
- <div id="demo">
- <div class="item">
- 演示演示
- </div>
- ....任意个div
- <div class="item">
- <div>测试内容...</div>
- </div>
- </div>
最后初始化即可
- $("#demo").gridalicious({
- gutter: 10,
- width: 200,
- animate: true,
- animationOptions: {
- speed: 150,
- duration: 300,
- complete: onComplete
- },
- });
演示: demo