响应式瀑布流插件Grid-A-Licious
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的更多相关文章
- 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件
一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...
- javascript适合移动端的响应式瀑布流插件实例演示
在线预览 jQuery插件大全 实例代码 <div class="sucaihuo-container"> <div class="demo" ...
- js实现响应式瀑布流
导读:瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pinterest ...
- jQuery超酷响应式瀑布流效果
参考 http://www.sucaihuo.com/js/74.html <script src="scripts/blocksit.min.js"></scr ...
- Bootstrap 响应式瀑布流 (使用wookmark)
使用瀑布布局 官方 http://www.wookmark.com/jquery-plugin GitHub https://github.com/GBKS/Wookmark-jQuery (下载后 ...
- 8款实用的Jquery瀑布流插件
1.网友Null分享Jquery响应式瀑布流布局插件 首先非常感谢网友Null的无私分享,此作品是一款响应式瀑布流布局Jquery插件,网友Null增加了一个屏幕自适应和响应式,响应式就是支持智能手机 ...
- 自定义基于jquery竖向瀑布流插件
公司新项目做了一个关于图片的板块,网上找了一些瀑布流插件都不是很适合自己,于是就自己造轮子写一个,并封装成插件github 于是就想分享一下,主要是为了更好的学习与记忆. 如果大家进来了,希望能给我g ...
- Wookmark-jQuery-master 瀑布流插件
Wookmark-jQuery-master 瀑布流插件使用介绍,含个人测试DEMO 要求 必备知识 本文要求基本了解 Html/CSS, JavaScript/JQuery. 开发环境 Dream ...
- Wookmark-jQuery-master 瀑布流插件使用介绍,含个人测试DEMO
要求 必备知识 本文要求基本了解 Html/CSS, JavaScript/JQuery. 开发环境 Dreamweaver CS6 / Chrome浏览器 演示地址 演示地址 资料下载 测试预 ...
随机推荐
- Elasticsearch 不同的搜索类型之间的区别
1.match 轻量级搜索 GET /wymlib/_search { "query": { "match": { "title": ...
- 解决 Python shell 中 Delete/Backspace 键乱码问题
简述 进入 Python shell,按下 Delete/Backspace 键,会出现 ^H 字符.命令输入错误后只能从头开始,无法删除,让人很头疼.为了便于后期使用,分享一个一劳永逸的方式. 基本 ...
- vue 报错./lib/html5-entities.js this relative module was not
原文参考http://www.bozhiyue.com/web/yuyan/2017/0501/1236324.html 然后就把他俩注视了,是不报错了,但是也没有运行不出来: 居然是因为早上我360 ...
- POJ-2018 Best Cow Fences(二分加DP)
Best Cow Fences Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 10174 Accepted: 3294 Desc ...
- 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 ...
- SQL Fundamentals || Single-Row Functions || 数字函数number functions
SQL Fundamentals || Oracle SQL语言 SQL Fundamentals: Using Single-Row Functions to Customize Output使用单 ...
- 设置自己的APP能打开文件(在其他应用中打开显示自己的应用)
http://blog.csdn.net/leewolf130/article/details/29568961 http://www.jianshu.com/p/9711c3daf4bb https ...
- zabbix 报警的返回值
常用: {DATE} {ESC.HISTORY} {EVENT.AGE} {EVENT.DATE} {EVENT.ID} {EVENT.TIME} {HOSTNAME} {IPADDRESS} {IT ...
- httpd.conf .htaccess apache 服务器配置
PHP Advanced and Object-Oriented Programming Larry Ullman The standard solution in these situations ...
- centos7设置iptables
https://www.linuxidc.com/Linux/2017-10/147238.htm