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

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

  1. <html>
  2. 	<head>
  3. 		<meta charset="utf-8" />
  4. 		<title>Grid-A-Licious</title>
  5. 	</head>
  6. 	<body>
  7. 		<div id="gridA">
  8. 			<div class="item">这是瀑布流中的一项</div>
  9. 			<div class="item">这是瀑布流中的一项</div>
  10. 			<div class="item">这是瀑布流中的一项</div>
  11. 			<div class="item">这是瀑布流中的一项</div>
  12. 			<div class="item">这是瀑布流中的一项</div>
  13. 			<div class="item">这是瀑布流中的一项</div>
  14. 			<div class="item">这是瀑布流中的一项</div>
  15. 			<div class="item">这是瀑布流中的一项</div>
  16. 			<div class="item">这是瀑布流中的一项</div>
  17. 			<div class="item">这是瀑布流中的一项</div>
  18. 			.....
  19. 		</div>
  20. 		<script type="text/javascript" src="jquery-1.11.0.js" ></script>
  21. 		<script type="text/javascript" src="jquery.grid-a-licious.min.js" ></script>
  22. 		<script type="text/javascript">
  23.                 (function(){
  24. 	               $("#gridA").gridalicious({});
  25.                  })()
  26.                 </script>
  27. 	</body>
  28. </html>

　　

插件默认参数：

  1. {
  2.         selector: '.item',　　//设置瀑布流中每一项的类名
  3.         width: 225,　　　　　　//设置等宽列的宽度，默认225，注意后面不要加"px"
  4.         gutter: 20,　　　　　　//设置瀑布流中没项的间隔，默认20，注意后面不要加"px"
  5.         animate: false,      //设置生成瀑布流的动画效果，默认无动画效果
  6.         animationOptions: {  //动画效果控制选项
  7.             speed: 200,　　　　　　　　　　
  8.             duration: 300,　　　　　　　　
  9.             effect: 'fadeInOnAppear',　 //目前就这一种动画效果
  10.             queue: true,
  11.             complete: function () {}　　//动画完成后的回调
  12.         }
  13. }

以上参数均为可选参数。

插件效果实例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. redis系列之数据库与缓存数据一致性解决方案

    redis系列之数据库与缓存数据一致性解决方案 数据库与缓存读写模式策略 写完数据库后是否需要马上更新缓存还是直接删除缓存? (1).如果写数据库的值与更新到缓存值是一样的,不需要经过任何的计算,可以 ...

  2. 程序猿职业生涯中的 Norris 常数

    我的朋友Clift Norris发现了一个基本常数.我称之为Norris常数,一个未经培训的程序猿在他或她遇到瓶颈之前能写出的平均代码量.Clift预计这个值是1500行. 超过这个数以后,代码会变得 ...

  3. Spark On Yarn Cluster生产环境下JVM的OOM和Stack Overflow问题

    1.Spark on Yarn下JVM的OOM问题及解决方式 2.Spark中Driver的Stack Overflow的问题及解决方式 Spark on Yarn cluster mode: 此时有 ...

  4. [django]form不清空问题解决

    https://www.cnblogs.com/OldJack/p/7118396.html 有时候提交表单后,发现某个字段写错了,但是form的其他字段竟然被清空,这个万万不能接受.所有django ...

  5. PHP开启CORS

    CORS 定义 Cross-Origin Resource Sharing(CORS)跨来源资源共享是一份浏览器技术的规范,提供了 Web 服务从不同域传来沙盒脚本的方法,以避开浏览器的同源策略,是 ...

  6. MongoDB3.x中添加用户和权限控制

    现在需要创建一个帐号,该账号需要有grant权限,即:账号管理的授权权限.注意一点,帐号是跟着库走的,所以在指定库里授权,必须也在指定库里验证(auth) ? 1 2 3 4 5 6 7 8 9 10 ...

  7. python中文件变化监控-watchdog

    在python中文件监控主要有两个库,一个是pyinotify ( https://github.com/seb-m/pyinotify/wiki ),一个是watchdog(http://pytho ...

  8. [LeetCode] 496. Next Greater Element I_Easy tag: Stack

    You are given two arrays (without duplicates) nums1 and nums2 where nums1’s elements are subset of n ...

  9. word转pdf时图片质量下降的解决方案__亲测有效

    写论文时经常需要将word文档转成pdf文档,通常的做法是word另存为pdf文档,这样很简洁很方面,可是最大的问题是图片质量会大大下降.究其原因,“另存为”选项会压缩图片,以降低pdf文档的大小.解 ...

  10. matplotlib--画图时保存图片空白的问题

    问题: 当使用如下代码保存使用 plt.savefig 保存生成的图片时,结果打开生成的图片却是一片空白. import matplotlib.pyplot as plt ""&q ...