在线演示

我们曾经介绍过俩款知名的响应式布局插: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. JMeter分布式配置

    搭建进行分布式平台测试前提: 1 所有的防火墙应该关闭 2 所有的客户端应该都是在同一个子网中. 3 确保jMeter可以访问这个服务器 4 确保各个客户端的jMeter的版本都是一致的,不同版本的J ...

  2. PLSQL_动态语句的解析(概念)

    2014-06-02 Created By BaoXinjian

  3. Spring boot处理OPTIONS请求

    一.现象从fetch说起,用fetch构造一个POST请求. fetch('http://127.0.0.1:8000/api/login', { method: "POST", ...

  4. 利用WGET下载文件,并保存到指定目录

    wget是Linux上一个非常不错的下载指令,也算是Linux工作者常用的指令之一 而这个指令我想在各大系统都预设有提供,包括了Ubuntu.Fedora等,而一般来说,要使用wget下载档案,只需要 ...

  5. DevExpress导出Excel样式设置

    /// <summary> /// 导出到Excel /// </summary> /// <param name="gridControl"> ...

  6. mysql 更新数据表的记录

    对于表里的记录值,可以通过update 命令进行更改,语法如下: UPDATE tablename SET field1=value1,field2.=value2,……fieldn=valuen [ ...

  7. 图像的线性空间滤波matlab实现

    1.线性空间滤波函数Z = imfilter(X,H,option1,option2,...) X为输入图像矩阵,H为m*n维的掩膜矩阵,H中的数据类型必须是double类型.掩膜矩阵可以是用户定义, ...

  8. cocos2dx实现3d拾取注意事项

    用的是cocos2dx 3.x,如果是真机测试,glview = cocos2d::GLViewImpl::createWithRect(...)和glview->setDesignResolu ...

  9. Python shell对比

    对Python.shell的一些思考 如果使用python去写脚本来处理日常事务的话,相对于shell是一件比较麻烦的事情,因为我可以使用shell在花费更少的时间内,比较熟练地使用awk.sed和g ...

  10. Msys2:windows下好用的unix模拟器

    msys2是基于mingw的bash模拟器,他为在windows下使用类似unix的环境提供了方便.同时,他还是基于mingw的,所以,他生成的也是原生的windows程序. msys2官方网站是:h ...