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

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

 

 

 

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

如何使用

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

 

<script src="http://kfxx.info/js/jquery.1.8.0.min.js"></script>
<script src="http://kfxx.info/js/jquery.grid-a-licious.min.js"></script>

然后按如下方式添加内容，可自定义设置item样式  

<div id="demo">
<div class="item">
演示演示
</div>
....任意个div
<div class="item">
<div>测试内容...</div>
</div>
</div>

最后初始化即可

$("#demo").gridalicious({
    gutter: 10,
    width: 200,
    animate: true,
    animationOptions: {
        speed: 150,
        duration: 300,
        complete: onComplete
    },
});

 

演示： demo

评论

7 楼 lzq123chy 2014-01-20  

我想要个分页的瀑布流,楼主能把demo传给我吗我的邮箱[e-mail]

6 楼 xieye 2013-12-04  

http://js.people.com.cn/culture/picture
这个貌似也不错

5 楼 dsjt 2013-12-03  

这么严肃的学术问题，demo不能搞点和谐的图片吗？？

4 楼 soutnila 2013-12-03  

瀑布流 应该自动加载余下内容吧？随鼠标滚轮响应事件。看完了。有一种被广告了的感觉

3 楼 kuchaguangjie 2013-12-02  

照片不错!

2 楼 DiaoCow 2013-12-02  

求楼主测试图片

1 楼 semmy 2013-12-02  

应该加一个那个根据鼠标滚动加载图片的插件