超棒的响应式布局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 相关文章推荐
js prototype截取字符串函数
Apr 01 Javascript
加载 Javascript 最佳实践
Oct 30 Javascript
JQuery实现倒计时按钮的实现代码
Mar 23 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
Jun 27 Javascript
jquery验证表单中的单选与多选实例
Aug 18 Javascript
使用Javascript写的2048小游戏
Nov 25 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
Apr 14 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
浅谈js内置对象Math的属性和方法(推荐)
Sep 19 Javascript
JS定时器实现数值从0到10来回变化
Dec 09 Javascript
JQuery实现动态操作表格
Jan 11 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
Oct 19 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
php中文本数据翻页(留言本翻页)
2006/10/09 PHP
PHP压缩html网页代码(清除空格,换行符,制表符,注释标记)
2012/04/02 PHP
php eval函数一句话木马代码
2015/05/21 PHP
Nigma vs Alliance BO5 第二场2.14
2021/03/10 DOTA
网站404页面3秒后跳到首页的实例代码
2013/08/16 Javascript
Textarea根据内容自适应高度
2013/10/28 Javascript
页面按钮禁用与解除禁用的方法
2014/02/19 Javascript
js获取日期:昨天今天和明天、后天
2014/06/11 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
2015/01/19 Javascript
JavaScript事件类型中UI事件详解
2016/01/14 Javascript
js实现返回顶部效果
2017/03/10 Javascript
JavaScript操作文件_动力节点Java学院整理
2017/06/30 Javascript
JavaScript中document.referrer的用法详解
2017/07/04 Javascript
ng-zorro-antd 入门初体验
2018/12/03 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
2020/07/20 Javascript
three.js中多线程的使用及性能测试详解
2021/01/07 Javascript
[05:48]DOTA2英雄梦之声vol21 屠夫
2014/06/20 DOTA
[59:30]完美世界DOTA2联赛PWL S3 access vs LBZS 第二场 12.20
2020/12/23 DOTA
python实现点对点聊天程序
2018/07/28 Python
python+ffmpeg批量去视频开头的方法
2019/01/09 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
python实现美团订单推送到测试环境,提供便利操作示例
2019/08/09 Python
Python3和pyqt5实现控件数据动态显示方式
2019/12/13 Python
澳大利亚潮流尖端的快时尚品牌:Cotton On
2016/09/26 全球购物
Belvilla德国:在线预订度假屋
2018/04/10 全球购物
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
超级英雄、电影和电视、乐队和音乐T恤:Loud Clothing
2019/09/01 全球购物
JD Sports西班牙:英国领先的运动服装公司
2020/01/06 全球购物
内业资料员岗位职责
2014/01/04 职场文书
一年级语文教学反思
2014/02/13 职场文书
《母鸡》教学反思
2014/02/25 职场文书
数控技校生自我鉴定
2014/03/02 职场文书
班级读书活动总结
2014/06/30 职场文书
我的大学四年规划书范文2014
2014/09/26 职场文书
检讨书1000字
2014/10/11 职场文书
如何使用Python提取Chrome浏览器保存的密码
2021/06/09 Python