Grid-A-Licious是一款遵守MIT协议的响应式瀑布流插件。该插件总代码行不超过400行，实现很巧妙，使用时也很流畅。实现原理也很简单，根据屏幕宽度和参数中设置的列宽度以及每项之间的间隔宽度，计算出当前屏幕宽度下应该生成几个等宽列；列生成好之后，再把每项放到等宽列中；当屏幕尺寸改变时，重新计算列表，然后再重新填充项。

使用该插件也很方便。使用实例：

<html>

	<head>

		<meta charset="utf-8" />

		<title>Grid-A-Licious</title>

	</head>

	<body>

		<div id="gridA">

			<div class="item">这是瀑布流中的一项</div>

			<div class="item">这是瀑布流中的一项</div>

			<div class="item">这是瀑布流中的一项</div>

			<div class="item">这是瀑布流中的一项</div>

			<div class="item">这是瀑布流中的一项</div>

			<div class="item">这是瀑布流中的一项</div>

			<div class="item">这是瀑布流中的一项</div>

			<div class="item">这是瀑布流中的一项</div>

			<div class="item">这是瀑布流中的一项</div>

			<div class="item">这是瀑布流中的一项</div>

			.....

		</div>

		<script type="text/javascript" src="jquery-1.11.0.js" ></script>

		<script type="text/javascript" src="jquery.grid-a-licious.min.js" ></script>

		<script type="text/javascript">

                (function(){

	               $("#gridA").gridalicious({});

                 })()

                </script>

	</body>

</html>

　　

插件默认参数：

{

        selector: '.item',　　//设置瀑布流中每一项的类名

        width: 225,　　　　　　//设置等宽列的宽度，默认225，注意后面不要加"px"

        gutter: 20,　　　　　　//设置瀑布流中没项的间隔，默认20，注意后面不要加"px"

        animate: false,      //设置生成瀑布流的动画效果，默认无动画效果

        animationOptions: {  //动画效果控制选项

            speed: 200,　　　　　　　　　　

            duration: 300,　　　　　　　　

            effect: 'fadeInOnAppear',　 //目前就这一种动画效果

            queue: true,

            complete: function () {}　　//动画完成后的回调

        }

}

以上参数均为可选参数。

插件效果实例http://suprb.com/apps/gridalicious/

插件源码下载https://github.com/suprb/Grid-A-Licious　

响应式瀑布流插件Grid-A-Licious的更多相关文章

  1. 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件

    一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...

  2. javascript适合移动端的响应式瀑布流插件实例演示

    在线预览 jQuery插件大全 实例代码 <div class="sucaihuo-container"> <div class="demo" ...

  3. js实现响应式瀑布流

    导读:瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pinterest ...

  4. jQuery超酷响应式瀑布流效果

    参考 http://www.sucaihuo.com/js/74.html <script src="scripts/blocksit.min.js"></scr ...

  5. Bootstrap 响应式瀑布流 (使用wookmark)

    使用瀑布布局 官方 http://www.wookmark.com/jquery-plugin GitHub https://github.com/GBKS/Wookmark-jQuery  (下载后 ...

  6. 8款实用的Jquery瀑布流插件

    1.网友Null分享Jquery响应式瀑布流布局插件 首先非常感谢网友Null的无私分享,此作品是一款响应式瀑布流布局Jquery插件,网友Null增加了一个屏幕自适应和响应式,响应式就是支持智能手机 ...

  7. 自定义基于jquery竖向瀑布流插件

    公司新项目做了一个关于图片的板块,网上找了一些瀑布流插件都不是很适合自己,于是就自己造轮子写一个,并封装成插件github 于是就想分享一下,主要是为了更好的学习与记忆. 如果大家进来了,希望能给我g ...

  8. Wookmark-jQuery-master 瀑布流插件

    Wookmark-jQuery-master 瀑布流插件使用介绍,含个人测试DEMO 要求 必备知识 本文要求基本了解 Html/CSS,  JavaScript/JQuery. 开发环境 Dream ...

  9. Wookmark-jQuery-master 瀑布流插件使用介绍，含个人测试DEMO

    要求 必备知识 本文要求基本了解 Html/CSS,  JavaScript/JQuery. 开发环境 Dreamweaver CS6 / Chrome浏览器 演示地址 演示地址 资料下载   测试预 ...

随机推荐

  1. python开发环境搭建(windows+python2.7.5+django1.5.4)【原创】

    先插入一条广告,博主新开了一家淘宝店,经营自己纯手工做的发饰,新店开业,只为信誉!需要的亲们可以光顾一下!谢谢大家的支持!店名: 小鱼尼莫手工饰品店经营: 发饰.头花.发夹.耳环等(手工制作)网店: ...

  2. bootstrapValidator remote 的接受 验证 值

    本来之前也做过一次这样的验,但可能是这两天太热脑袋不够用了,于是就只有看看源码咯 that.updateStatus(updateAll ? $f.attr('data-bv-field') : $f ...

  3. 深圳MPD大会，五大专题一会尽享

    深圳MPD大会,五大专题一会尽享 2013年9月,深圳的高温将慢慢褪去,炎炎夏日也会变得稍微清凉一些.但9月It届的峰会活动却没有丝毫的锐减.9月7-8日深圳将迎来MPD大会2013的收官之站. MP ...

  4. opencv学习之PyImageSearch

    Practical Python and OpenCV+ Case Studies 是一本opencv的入门书籍 强烈推荐一个老外的网站,pyimagesearch 网址:https://www.py ...

  5. ubuntu下安装opencv3.1.0

    ubuntu14.04安装opencv3.1 1.下载opencv3.1源码http://opencv.org/releases.html 2.安装opencv3 2.1安装opencv3的依赖 1 ...

  6. Qt中容器类应该如何存储对象（对象加入到容器时会发生拷贝，容器析构时，容器内的对象也会析构）

    Qt提供了丰富的容器类型,如:QList.QVector.QMap等等.详细的使用方法可以参考官方文档,网上也有很多示例文章,不过大部分文章的举例都是使用基础类型:如int.QString等.如果我们 ...

  7. 转：数据库范式（1NF 2NF 3NF BCNF）

    数据库的设计范式是数据库设计所需要满足的规范,满足这些规范的数据库是简洁的.结构明晰的,同时,不会发生插入(insert).删除(delete)和更新(update)操作异常.反之则是乱七八糟,不仅给 ...

  8. Servlet----------ServletContext (重要)

    1.ServletContext的概述 一个项目只有一个ServletContext对象!application 我们可以在N多个Servlet中获取这个唯一的对象,使用它来给多个Servlet传递数 ...

  9. http形式的webservice

    import java.io.ByteArrayOutputStream; import java.io.IOException; import java.io.InputStream; import ...

  10. 【转】 Oracle 用户权限管理方法

    sys;//系统管理员,拥有最高权限 system;//本地管理员,次高权限 scott;//普通用户,密码默认为tiger,默认未解锁 sys;//系统管理员,拥有最高权限 system;//本地管 ...