首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

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

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

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

最近瀑布流布局比较流行,那么今天就给jQuery响应式飞瀑流布局插件 - 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

?

1 楼 wcs5639187945 2014-01-13   求美女瀑布流的图片  我没图片做瀑布流 2 楼 justjavac 前天   wcs5639187945 写道求美女瀑布流的图片  我没图片做瀑布流
点击

热点排行