在线演示

我们曾经介绍过俩款知名的响应式布局插: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. @Html.Display @Html.LabelFor @Html.EditorFor Html.DisplayForModel Html.LabelForModel Html.EditorForModel

  2. 什么是Asterisk,它如何帮助我们的呼叫中心?

    如今的呼叫中心与过去的呼叫中心有很大差异.过去,一间房屋或一座大楼,装上硬接线的POTS电话,招聘几名员工就可以建立一个呼叫中心.如今,这样的情形已经一去不复返,因为有许多新技术让呼叫中心变得更像是一 ...

  3. [置顶] Android中使用Movie显示gif动态图

    转载请注明:  http://blog.csdn.net/u012975705/article/details/48717391 在看这篇博文之前对attr自定义属性还是不是很熟的童鞋可以先看看:An ...

  4. System V IPC

    1.概述 System V IPC共有三种类型:System V消息队列.System V 信号量.System V 共享内存区. System V IPC操作函数如下: 2.key_t键和ftok函 ...

  5. Python监控Windows下的文件变化

    windows下监控文件系统的变化.用python非常方便.实例代码例如以下,非常easy.也不多说了. import os import win32file import win32con ACTI ...

  6. 上传一个 游戏server架构图

  7. 温故而知新: 关于 js Form 方式提交的一些新认知

    这里介绍的是通过js进行异步form提交,而不是表单Form Submit提交. 提交方式主要有以下两种: 参数为字符串方式的提交,如:a=b&c=d formData方式提交, 如:new ...

  8. chromedriver 下载地址

    重要的事情说三遍 chromedriver 下载地址 chromedriver 下载地址 chromedriver 下载地址 http://chromedriver.storage.googleapi ...

  9. 怎么从docker中copy文件到 本机

    怎么从docker中copy文件到 本机 docker cp <containerId>:/file/path/within/container /host/path/target

  10. Hadoop2.5.2源码编译及导入Eclipse

    前言:由于官网提供的64位hadoop是没有编译的,所以当我们用到64位的hadoop时,需要在自己的64位linux系统上编译hadoop源码.另外,要想在eclipse里查看hadoop源码,修改 ...