超棒的响应式布局jQuery插件Freetile.js

 更新时间:2014年11月17日 13:12:37   投稿:hebedich  
随着页面扁平化的普及,越来越多的网站都开始使用响应式布局,作为一个优秀的前端工作者,必须要精通的,这里给大家推荐一款响应式布局的jQuery插件。

在线演示

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

主要特性

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

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

基本使用方式:

Js代码

复制代码 代码如下:
$('#container').freetile();

启用动画特效:

Js代码

复制代码 代码如下:
$('#container').freetile({animate:true,elementDelay:30});

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

Js代码

复制代码 代码如下:
$('#container').freetile({selector:'.thumbs'});

是不是很简单,有需要的话可以直接拿走哈,千万别跟我客气。

相关文章

  • jQuery中animate用法实例分析

    jQuery中animate用法实例分析

    这篇文章主要介绍了jQuery中animate用法,实例分析了animate的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • jquery重复提交请求的原因浅析

    jquery重复提交请求的原因浅析

    jquery重复提交请求一般来说有两个原因,一是没有取消绑定;二是多次引用同一个js文件
    2014-05-05
  • 推荐25个超炫的jQuery网格插件

    推荐25个超炫的jQuery网格插件

    本文给大家推荐了25个jQuery网格特效插件,在此集合中,我们将展示一些非常酷的jQuery插件和资源在网格布局设计,提高了数据的介绍。一些实用的插件,一定会提供一个美好的用户体验。同时,一些精致的资源,这将有助于布局精美的数据范围。
    2014-11-11
  • jQuery图片渐变特效的简单实现

    jQuery图片渐变特效的简单实现

    下面小编就为大家带来一篇jQuery图片渐变特效的简单实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • 20个非常棒的Jquery实用工具 国外文章

    20个非常棒的Jquery实用工具 国外文章

    网站设计者往往会设计一些小的工具类(widgets)或者一些可复用的程序,从而使页面更楚楚动人,更吸引浏览者驻足。这里收集了20个常用Jquery工具类,这些小的工具可以帮助网站设计人员和站长非常容易地创建漂亮的站点。
    2010-01-01
  • jquery实现textarea输入字符控制(仿微博输入控制字符)

    jquery实现textarea输入字符控制(仿微博输入控制字符)

    首先获取输入框的值然后获取输入框的值;如果字数大于500、发布按钮禁用否从发布按钮启用,感兴趣的朋友可以详细了解下哈
    2013-04-04
  • jquery实现带二级菜单的导航示例

    jquery实现带二级菜单的导航示例

    这篇文章主要介绍了jquery实现带二级菜单的导航示例,需要的朋友可以参考下
    2014-04-04
  • jQuery实现的精美平滑二级下拉菜单效果代码

    jQuery实现的精美平滑二级下拉菜单效果代码

    这篇文章主要介绍了jQuery实现的精美平滑二级下拉菜单效果代码,通过响应鼠标事件动态修改页面元素属性实现二级下拉菜单效果,需要的朋友可以参考下
    2016-03-03
  • jQuery学习笔记之总体架构

    jQuery学习笔记之总体架构

    jQuery是一个兼容多浏览器的javascript框架,核心理念是write less,do more(写得更少,做得更多)。如今,jQuery已经成为最流行的javascript框架,在世界前10000个访问最多的网站中,有超过55%在使用jQuery。那么作为一个前端设计师,怎么可能不来深入了解下jQuery呢,首先我们从他的总体构架开始吧
    2014-06-06
  • 初探jquery——表单应用范例

    初探jquery——表单应用范例

    初探jquery——表单应用范例...
    2007-02-02

最新评论