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