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


Posted in Javascript onNovember 17, 2014

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

在线演示

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

主要特性

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

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

基本使用方式:

Js代码

$('#container').freetile();

启用动画特效:

Js代码

$('#container').freetile({animate:true,elementDelay:30});

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

Js代码

$('#container').freetile({selector:'.thumbs'});

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

Javascript 相关文章推荐
IE7提供XMLHttpRequest对象为兼容
Mar 08 Javascript
JavaScript获取图片的原始尺寸以宽度为例
May 04 Javascript
基于javascript的COOkie的操作实现只能点一次
Dec 26 Javascript
JQuery的ON()方法支持的所有事件罗列
Feb 28 Javascript
jQuery读取XML文件内容的方法
Mar 09 Javascript
实例讲解JS中setTimeout()的用法
Jan 28 Javascript
Javascript中的Prototype到底是什么
Feb 16 Javascript
Js的Array数组对象详解
Feb 22 Javascript
javascript 封装Date日期类实例详解
May 28 Javascript
javascript计算对象长度的方法
Oct 25 Javascript
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
小程序实现上下移动切换位置
Sep 23 Javascript
jQuery Masonry瀑布流插件使用详解
Nov 17 #Javascript
javascript将url中的参数加密解密代码
Nov 17 #Javascript
PHP使用方法重载实现动态创建属性的get和set方法
Nov 17 #Javascript
PHP PDO操作总结
Nov 17 #Javascript
JavaScript函数详解
Nov 17 #Javascript
提升PHP安全:8个必须修改的PHP默认配置
Nov 17 #Javascript
详解Javascript 装载和执行
Nov 17 #Javascript
You might like
在apache下限制每个虚拟主机的并发数!!!!
2006/10/09 PHP
THINKPHP支持YAML配置文件的设置方法
2015/03/17 PHP
PHP foreach遍历多维数组实现方式
2016/11/16 PHP
PHP迭代器接口Iterator用法分析
2017/12/28 PHP
经常用的图片在容器中的水平垂直居中实例
2007/06/10 Javascript
JQuery实现的在新窗口打开链接的方法小结
2010/04/22 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
2014/12/18 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
2016/10/09 Javascript
js中创建对象的几种方式
2017/02/05 Javascript
基于JavaScript实现选项卡效果
2017/07/21 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
2017/08/10 Javascript
浅析Javascript中双等号(==)隐性转换机制
2017/10/27 Javascript
vue .sync修饰符的使用详解
2018/06/15 Javascript
vue 实现购物车总价计算
2019/11/06 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
2020/08/13 Javascript
jquery+ajax实现异步上传文件显示进度条
2020/08/17 jQuery
vue打开子组件弹窗都刷新功能的实现
2020/09/21 Javascript
Python中decorator使用实例
2015/04/14 Python
python写入xml文件的方法
2015/05/08 Python
django 按时间范围查询数据库实例代码
2018/02/11 Python
Python整数对象实现原理详解
2019/07/01 Python
python 将日期戳(五位数时间)转换为标准时间
2019/07/11 Python
Python实现不规则图形填充的思路
2020/02/02 Python
Django crontab定时任务模块操作方法解析
2020/09/10 Python
python 多进程和协程配合使用写入数据
2020/10/30 Python
Django前后端分离csrf token获取方式
2020/12/25 Python
使用CSS3来制作消息提醒框
2015/07/12 HTML / CSS
Harrods美国:英国最大的百货公司
2018/11/04 全球购物
台湾家适得:Homeget
2019/02/11 全球购物
台湾三立电视电商平台:电电购
2019/09/09 全球购物
中专生求职自荐信范文
2013/12/22 职场文书
环保倡议书100字
2014/05/15 职场文书
学校宣传标语
2014/06/18 职场文书
地理科学专业自荐信
2014/09/01 职场文书
python代码实现备忘录案例讲解
2021/07/26 Python
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js