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

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

 

jQuery响应式瀑布流布局插件 - Grid-A-Licious_第1张图片

 

 

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

 

你可能感兴趣的:(javascript)