另外一款超棒的响应式布局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 旋转木马插件允许开发人员以水平或垂直的方式显示内容,视频和图像 ...
随机推荐
- go 学习 ---package
1.包简述 GO本身没有项目的概念,只有包,包括可执行包和不可执行包,而不管什么包,都应该包含在 $GOPATH/src 目录下,GO命令和编译器会在 $GOPATH/src 目录下搜索相应的包.比如 ...
- RHEL7 -- 使用team替换bonding实现链路聚合网卡绑定
将网卡enp0s8.enp0s9进行链路绑定 安装teamd包 # yum install teamd 创建一个team链接 # nmcli con add con-name team0 type t ...
- 软件测试自动化之- API Test
API测试 从本质上来说,API测试是用来验证组成软件的那些单个方法的正确性,而不是测试整个系统本身. API测试也被称为单元测试(Unit Testing), 模块测试(Module Testing ...
- VS2012/13中即将增加InstallShield升级版
对于Visual Studio 2012去掉了前作中的安装程序(Installer)项目模板,许多开发者都感到非常失望.这个流行的项目类型为开发者们提供了若干选项:除了InstallShield LE ...
- 【转】SQL SERVER函数无法执行对数据库的修改语句
当在函数中使用INSERT语句时出现以下错误: 消息 443,级别 16,状态 15,过程 MyTestFunction,第 9 行 在函数内的 'INSERT' 中对带副作用的或依赖于时间的运算符的 ...
- 【翻译自mos文章】job 不能自己主动执行--这是另外一个mos文章,本文章有13个解决方法
job 不能自己主动执行--这是另外一个mos文章 參考原文: Jobs Not Executing Automatically (Doc ID 313102.1) 适用于: Oracle Datab ...
- [k8s] kubelet单组件启动静态pod
kubelet单组件启动静态pod 无需k8s其他组件,单独下载kubelet的二进制,可以启动静态pod. 静态pod不受api管理,kubectl get po可以看到,但是kubectl del ...
- 非常全的linux面试笔试题及答案
一.填空题:1. 在Linux系统中,以 文件 方式访问设备 .2. Linux内核引导时,从文件/etc/fstab 中读取要加载的文件系统.3. Linux文件系统中每个文件用 i节点来标识.4. ...
- iOS开发-模拟器的小常识
/* 补充: 让模拟器锁屏: command + l */ 让模拟器变大变小 打开Xcode模拟器,选择Window->Scale->
- 解决老是提示找不到Mapper文件无法执行定义的方法问题!
尼玛,被mybatis的*Mapper.xml文件害惨了!整整两天都在围绕这个问题转圈! 先看问题长啥样吧!下面是通过逆向工程生成的Mapper.xml文件,包路径什么的都没有错! 但是每次调用Map ...