在线演示

我们曾经介绍过俩款知名的响应式布局插:isotopemasonary,今天我们这里再介绍一款相当不错的响应式布局插件 – Freetile.js,使用它同样可以生成超酷的动态布局效果。相信大家一定会喜欢!

主要特性

Freetie来自于Assemblage和 Assemblage Plus的内建布局引擎,设计灵感来自于Masonry,VGrid和Wookmark,但是和他们相比较,拥有以下独特的地方:

  • 允许包含任何尺寸的元素,并且不要求一个固定的列宽度,因此你不需要指定列宽度来迎合你的元素大小
  • 内建算法允许你很容易的自定义插入的位置,满足不同喜好的展示方式。例如,向左或者向右对齐,或者接近特定元素。
  • 智能的动画方式能够很好的判断是否需要动画特效。例如,刚加入的元素和不可见的元素。
  • 只要使用Assemblage 和 Assemblage Plus模板的网站都在使用它,所以说非常稳定。

如何使用

基本使用方式:

  1. $('#container').freetile();

启用动画特效:

  1. $('#container').freetile({ animate: true, elementDelay: 30 });

指定一个自定义的元素选择器:

  1. $('#container').freetile({ selector: '.thumbs' });

是不是很简答,希望大家喜欢这个插件,如果你有任何问题,请给我们留言!

来源:另外一款超棒的响应式布局jQuery插件 – Freetile.js

另外一款超棒的响应式布局jQuery插件 – Freetile.js的更多相关文章

  1. [转]响应式表格jQuery插件 – Responsive tables

    本文转自:http://www.shejidaren.com/responsive-tables-for-bootstrap-3.html 这个Responsive tables jQuery插件依赖 ...

  2. FooTable高级的响应式表格jQuery插件

    FooTable是一个高级jQuery插件,允许开发者在触屏智能手机及平板电脑等小型设备上制作数据非常惊人的HTML表格.它可以将HTML表转换成可扩展的响应式表格,且通过单击某一行即可将该行数据隐藏 ...

  3. 超棒的响应式设计测试书签和工具(bookmarks)(转)

    一.测试书签(bookmarks) Viewport Resizer 这个书签号称拥有158个国家3万多活跃的用户,主要特性: 完全自定制 方便的添加自定义尺寸 手动的横竖屏切换 自动的横竖屏切换 ( ...

  4. 分享29个超赞的响应式Web设计

    原文自:http://www.csdn.net/article/2013-01-16/2813678-responsive-design-websites 最近几年,响应式Web设计不断印入人们眼帘, ...

  5. HTML5 respond.js 解决IE6~8的响应式布局问题

    HTML5 respond.js 解决IE6~8的响应式布局问题   响 应式布局,理想状态是,对PC/移动各种终端进行响应.媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然 ...

  6. web前端学习(二)html学习笔记部分(9)-- 响应式布局

    1.2.23  响应式布局基础 1.2.23.1  响应式布局介绍 1.响应式布局是2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多终端 -- 而不是为每个终端做一个特定的版本.这个概 ...

  7. 分享22款响应式的 jQuery 图片滑块插件

    响应式(Responsive)设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验.这篇文章收集了22款优秀的响应式 jQuery 幻灯片插件,它们能够帮助 ...

  8. 15款帮助你实现响应式导航的 jQuery 插件

    对于我们大多数人来说,建立一个负责任的布局中最困难的方面是规划和导航的实现.由于没有真正经得起考验的通用解决方案,您可以使用的菜单设计风格将取决于正在建设的网站类型. 无论你正在建设什么类型的网站,在 ...

  9. 12款响应式的 jQuery 旋转木马(传送带)插件

    在企业网站,作品集网站,电子商务网站或任何其他类型的网站内容显示图片可以使用 jQuery 旋转木马(传送带)插件来实现. jQuery 旋转木马插件允许开发人员以水平或垂直的方式显示内容,视频和图像 ...

随机推荐

  1. Python学习笔记015——汉字编码

    1 字符串的编码(encode)格式 GB2312   GBK   GB18030  UTF-8  ASCII 其中常用的编码格式有 国标系列:GB18030(GBK(GB2312)) (window ...

  2. 设置Adobe Reader打开PDF文件保持记忆功能

    设置Adobe Reader打开PDF文件保持记忆功能 打开菜单“编辑”->“首选项”. 选择种类中的“文档”,在“打开设置”区域勾上“重新打开文档时恢复上次视图设置(R)”,确定之后就可以在下 ...

  3. kafka linux 启动脚本 sample

    #!/bin/sh # # chkconfig: 345 99 01 # description: Kafka # # File : Kafka # # Description: Starts and ...

  4. js判断字符串str是否包含字符串substr

    js判断字符串str是否包含字符串substr: function addUser(id,realName){ var userids = $("#userids").val(); ...

  5. RhinoMock初探

    官方wiki:http://www.ayende.com/wiki/Rhino+Mocks.ashx ========================================= 接口Mock: ...

  6. 如何进行SVN数据迁移并保存版本号数据

    如何从一台服务器192.168.8.2迁移到另一台服务器192.168.8.30进行SVN数据迁移并保存版本号数据 工具/原料   SVN 方法/步骤   1 打开远程服务,连接192.168.8.2 ...

  7. [sh]. 点的含义

    . 的含义 当前目录 隐藏文件 任意一个字符 生效配置文件

  8. java.net.Socket/java.net.ServerSocket-TCP Socket编程

    TCP 的 Java 支持 协议相当于相互通信的程序间达成的一种约定,它规定了分组报文的结构.交换方式.包含的意义以及怎样对报文所包含的信息进行解析,TCP/IP 协议族有 IP 协议.TCP 协议和 ...

  9. ny16 矩形嵌套

    矩形嵌套 时间限制:3000 ms  |  内存限制:65535 KB 难度:4 描述 有n个矩形,每个矩形可以用a,b来描述,表示长和宽.矩形X(a,b)可以嵌套在矩形Y(c,d)中当且仅当a< ...

  10. Not get deviceToken yet. Maybe: your certificate not configured APNs? or current network is not so good so APNs registration failed? or there is no APNs register code? Please refer to JPush docs.”

    今天在项目中集成了极光推送,一切都配置完毕,把程序运行起来的时候,报了下面的错误: Not get deviceToken yet. Maybe: your certificate not confi ...