另外一款超棒的响应式布局jQuery插件 – Freetile.js
我们曾经介绍过俩款知名的响应式布局插:isotope和masonary,今天我们这里再介绍一款相当不错的响应式布局插件 – Freetile.js,使用它同样可以生成超酷的动态布局效果。相信大家一定会喜欢!
主要特性
Freetie来自于Assemblage和 Assemblage Plus的内建布局引擎,设计灵感来自于Masonry,VGrid和Wookmark,但是和他们相比较,拥有以下独特的地方:
- 允许包含任何尺寸的元素,并且不要求一个固定的列宽度,因此你不需要指定列宽度来迎合你的元素大小
- 内建算法允许你很容易的自定义插入的位置,满足不同喜好的展示方式。例如,向左或者向右对齐,或者接近特定元素。
- 智能的动画方式能够很好的判断是否需要动画特效。例如,刚加入的元素和不可见的元素。
- 只要使用Assemblage 和 Assemblage Plus模板的网站都在使用它,所以说非常稳定。
如何使用
基本使用方式:
- $('#container').freetile();
启用动画特效:
- $('#container').freetile({ animate: true, elementDelay: 30 });
指定一个自定义的元素选择器:
- $('#container').freetile({ selector: '.thumbs' });
是不是很简答,希望大家喜欢这个插件,如果你有任何问题,请给我们留言!
- gbin1.zip (44.8 KB)
另外一款超棒的响应式布局jQuery插件 – Freetile.js的更多相关文章
- [转]响应式表格jQuery插件 – Responsive tables
本文转自:http://www.shejidaren.com/responsive-tables-for-bootstrap-3.html 这个Responsive tables jQuery插件依赖 ...
- FooTable高级的响应式表格jQuery插件
FooTable是一个高级jQuery插件,允许开发者在触屏智能手机及平板电脑等小型设备上制作数据非常惊人的HTML表格.它可以将HTML表转换成可扩展的响应式表格,且通过单击某一行即可将该行数据隐藏 ...
- 超棒的响应式设计测试书签和工具(bookmarks)(转)
一.测试书签(bookmarks) Viewport Resizer 这个书签号称拥有158个国家3万多活跃的用户,主要特性: 完全自定制 方便的添加自定义尺寸 手动的横竖屏切换 自动的横竖屏切换 ( ...
- 分享29个超赞的响应式Web设计
原文自:http://www.csdn.net/article/2013-01-16/2813678-responsive-design-websites 最近几年,响应式Web设计不断印入人们眼帘, ...
- HTML5 respond.js 解决IE6~8的响应式布局问题
HTML5 respond.js 解决IE6~8的响应式布局问题 响 应式布局,理想状态是,对PC/移动各种终端进行响应.媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然 ...
- web前端学习(二)html学习笔记部分(9)-- 响应式布局
1.2.23 响应式布局基础 1.2.23.1 响应式布局介绍 1.响应式布局是2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多终端 -- 而不是为每个终端做一个特定的版本.这个概 ...
- 分享22款响应式的 jQuery 图片滑块插件
响应式(Responsive)设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验.这篇文章收集了22款优秀的响应式 jQuery 幻灯片插件,它们能够帮助 ...
- 15款帮助你实现响应式导航的 jQuery 插件
对于我们大多数人来说,建立一个负责任的布局中最困难的方面是规划和导航的实现.由于没有真正经得起考验的通用解决方案,您可以使用的菜单设计风格将取决于正在建设的网站类型. 无论你正在建设什么类型的网站,在 ...
- 12款响应式的 jQuery 旋转木马(传送带)插件
在企业网站,作品集网站,电子商务网站或任何其他类型的网站内容显示图片可以使用 jQuery 旋转木马(传送带)插件来实现. jQuery 旋转木马插件允许开发人员以水平或垂直的方式显示内容,视频和图像 ...
随机推荐
- Python学习笔记010——作用域
1 作用域的分类 全局变量:在文件中所有函数外部创建的变量,整个文件可见 局部变量:在函数.类等内部创建的变量且仅用在函数内部的变量: 函数的形参也是局部变量. 注:所有的变量必须是先创建,再使用. ...
- SYS_R12 MOAC多组织的四个应用(案例)
2014-05-31 Created By BaoXinjian
- 国际化模块 angular-translate 简单方便快捷翻译中英文等多语言环境
很多web服务面对的不仅仅是当地用户,多语言环境不仅能提升逼格,更重要是一种用户体验. angular.js 作为前后端拆分的解决方案之一,当然离不开前端框架处理国际化的问题,angular.js 官 ...
- Socket网络编程 详细过程(转)
我们深谙信息交流的价值,那网络中进程之间如何通信,如我们每天打开浏览器浏览网页时,浏览器的进程怎么与web服务器通信的?当你用QQ聊天时,QQ进程怎么与服务器或你好友所在的QQ进程通信?这些都得靠so ...
- 已有iptables表的查看
查看已有iptables表 iptables -L -nv --line-number-L是--list的简写,作用是列出规则-n是ip以数字方式显示,有的会用域名方式显示.-v是显示详细信息 v=v ...
- 32个最热CPLD-FPGA论坛
1. OPENCORES.ORG这里提供非常多,非常好的PLD了内核,8051内核就可以在里面找到.进入后,选择project或者由http//www.opencores.org/browse.cgi ...
- lftp查看文件时间与登录服务查看文件时间相差8小时
第一步,校正VPS时区设置: rm -rf /etc/localtime ln -s /usr/share/zoneinfo/Asia/Shanghai /etc/localtime 第二步,修改FT ...
- cocos2d-x--精灵反转效果--CCOrbitCamera
CCSprite* pSprite = CCSprite::spriteWithFile("grossini.png"); pSprite->setPosition(ccp( ...
- Loadrunner常用操作
LoadRunner 参数化 为什么需要参数化? 大众理解:为了更加真实的模拟用户操作 底层原理: 1,应用服务,数据库会校验该值的唯一性(unique key) 2,为了避免数据库的查询缓存对性能测 ...
- LocationActivity
package com.baidu.location.demo; import com.baidu.baidulocationdemo.R;import com.baidu.location.BDLo ...