linwenx 2013-12-02
最近瀑布流布局比较流行,那么今天就给大家介绍一个这样的 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