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. Elasticsearch 不同的搜索类型之间的区别

    1.match   轻量级搜索 GET /wymlib/_search { "query": { "match": {  "title": ...

  2. 解决 Python shell 中 Delete/Backspace 键乱码问题

    简述 进入 Python shell,按下 Delete/Backspace 键,会出现 ^H 字符.命令输入错误后只能从头开始,无法删除,让人很头疼.为了便于后期使用,分享一个一劳永逸的方式. 基本 ...

  3. vue 报错./lib/html5-entities.js this relative module was not

    原文参考http://www.bozhiyue.com/web/yuyan/2017/0501/1236324.html 然后就把他俩注视了,是不报错了,但是也没有运行不出来: 居然是因为早上我360 ...

  4. POJ-2018 Best Cow Fences(二分加DP)

    Best Cow Fences Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 10174 Accepted: 3294 Desc ...

  5. HDU 4352 - XHXJ's LIS - [数位DP][LIS问题]

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4352 Time Limit: 2000/1000 MS (Java/Others) Memory Li ...

  6. SQL Fundamentals || Single-Row Functions || 数字函数number functions

    SQL Fundamentals || Oracle SQL语言 SQL Fundamentals: Using Single-Row Functions to Customize Output使用单 ...

  7. 设置自己的APP能打开文件(在其他应用中打开显示自己的应用)

    http://blog.csdn.net/leewolf130/article/details/29568961 http://www.jianshu.com/p/9711c3daf4bb https ...

  8. zabbix 报警的返回值

    常用: {DATE} {ESC.HISTORY} {EVENT.AGE} {EVENT.DATE} {EVENT.ID} {EVENT.TIME} {HOSTNAME} {IPADDRESS} {IT ...

  9. httpd.conf .htaccess apache 服务器配置

    PHP Advanced and Object-Oriented Programming Larry Ullman The standard solution in these situations ...

  10. centos7设置iptables

    https://www.linuxidc.com/Linux/2017-10/147238.htm