Grid-A-Licious 是一个简单易用的 jQuery 插件,可用于创建响应式瀑布流布局,针对不同设备可自动适应宽度。你可以通过参数设置它的宽度以及动态显示时的速度、延迟等等,定制性是比较高的。
首先在 HTML 页面头部中引入 jQuery 框架和 Grid-A-Licious 插件
- <script src="jquery.1.8.0.min.js"></script>
- <script src="jquery.grid-a-licious.min.js"></script>
然后按如下方式添加内容,可自定义设置item样式
- <div id="demo">
- <div>
- 演示演示
- </div>
- 任意个div
- <div>
- <div>测试内容...</div>
- </div>
- </div>
最后初始化即可
- $("#demo").gridalicious({
- gutter: 10,
- width: 200,
- animate: true,
- animationOptions: {
- speed: 150,
- duration: 300,
- complete: onComplete
- }
- });
参数名 | 默认值 | 可选值 | 描述 | 示例 |
---|---|---|---|---|
width | 225px | - | - |
|
gutter | 20px | - | - |
|
selector | .item | - | - |
|
animate | false | - | - |
|
animationOption | 225px | - | 动画选项 |
|
参数名 | 默认值 | 描述 |
---|---|---|
queue | 列队显示 | true |
speed | 显示每个item的时间 | 200 |
duration | 动画执行的时间 | 300 |
effect | item 显示的方式,目前只支持 fadeInOnAppear ,更多特效正在添加中… | fadeInOnAppear |
complete | 动画完成以后的回调函数 | function() |
- $('#prepend').click(function(){
- $("#example3").gridalicious('prepend', makeboxes());
- });
- $('#append').click(function(){
- $("#example3").gridalicious('append', makeboxes());
- });