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

崔博伦一路有你 2014-01-13

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

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

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

如何使用

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

Html代码  jQuery响应式瀑布流布局插件 - Grid-A-Licious
  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>  

然后按如下方式添加内jQuery响应式瀑布流布局插件 - Grid-A-Licious容,jQuery响应式瀑布流布局插件 - Grid-A-Licious可自定义设置item样式  

Html代码  jQuery响应式瀑布流布局插件 - Grid-A-Licious
  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代码  jQuery响应式瀑布流布局插件 - Grid-A-Licious
  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. });  

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

相关推荐

Web全栈笔记 / 0评论 2020-06-15