在线演示

我们曾经介绍过俩款知名的响应式布局插: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. C# -- 等待异步操作执行完成的方式 C# -- 使用委托 delegate 执行异步操作 JavaScript -- 原型:prototype的使用 DBHelper类连接数据库 MVC View中获取action、controller、area名称、参数

    C# -- 等待异步操作执行完成的方式 C# -- 等待异步操作执行完成的方式 1. 等待异步操作的完成,代码实现: class Program { static void Main(string[] ...

  2. OAF_OAF OAWebBean和OAPageContext的分析(概念)

    2015-04-03 Created By BaoXinjian

  3. OGG_GoldenGate数据表定义方式DEFGEN(案例)

    2014-03-09 Created By BaoXinjian

  4. Unix环境高级编程(十七)网络IPC套接字

    通过网络套接字可以使得不同计算机上运行的进程相互通信. 1.创建套接字 #include <sys/socket.h> Int socket( int domain, int type, ...

  5. 在python3.x下使用如下代码: import cPickle as pk 报错

    在python3.x下使用如下代码: import cPickle as pk会报如下错误:ImportError: No module named 'cPickle' 原因:python2有cPic ...

  6. [转]关于几本模拟IC设计书

    1.P.R.Gray的书 这本书被业界誉为模拟IC的Bible,盛名之下,必无虚士.现在已经出到第四版,作者无一例外是业界大牛,该书论述严谨,思路清晰,对电路分析透彻,定义严格明确,无愧Bible之名 ...

  7. app hybrid

    package com.note.testcases; /** * * The MIT License (MIT) * * Copyright (c) 2016 Alejandro Gómez Mor ...

  8. mysql-5.7 innodb change buffer 详解

    一.innodb change buffer 介绍: 1.innodb change buffer 是针对oltp场景下磁盘IO的一种优化(我也感觉这个不太像人话,但是它又非常的准确的说明 innod ...

  9. go系列之数组

    数组 数组是同一类型元素的集合.例如,整数集合 5,8,9,79,76 形成一个数组.Go 语言中不允许混合不同类型的元素,例如包含字符串和整数的数组.(译者注:当然,如果是 interface{} ...

  10. Java:集合,Map接口框架图

    Java集合大致可分为Set.List和Map三种体系,其中Set代表无序.不可重复的集合:List代表有序.重复的集合:而Map则代表具有映射关系的集合.Java 5之后,增加了Queue体系集合, ...