超棒的响应式布局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 相关文章推荐
基于jQuery的简单九宫格实现代码
Aug 09 Javascript
EditPlus注册码生成器(js代码实现)
Mar 25 Javascript
Javascript 按位与赋值运算符 (&=)使用介绍
Feb 04 Javascript
javascript常见用法总结
May 22 Javascript
node.js中的events.emitter.listeners方法使用说明
Dec 10 Javascript
js实现商品抛物线加入购物车特效
Nov 18 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
Apr 10 Javascript
React Native 集成jpush-react-native的示例代码
Aug 16 Javascript
jquery实现企业定位式导航效果
Jan 01 jQuery
webpack公共组件引用路径简化小技巧
Jun 15 Javascript
ng-alain表单使用方式详解
Jul 10 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
Apr 14 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
phpinfo() 中 Local Value(局部变量)Master Value(主变量) 的区别
2016/02/03 PHP
php获取'/'传参的值简单方法
2017/07/13 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
也说JavaScript中String类的replace函数
2011/09/22 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
2012/08/01 Javascript
JavaScript mapreduce工作原理简析
2012/11/25 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
2013/07/25 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
2015/12/07 Javascript
JS中常用的输出方式(五种)
2016/06/12 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
详细讲解JavaScript中的this绑定
2016/10/10 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
2016/12/02 Javascript
Vue2.0组件间数据传递示例
2017/03/07 Javascript
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
webpack学习教程之前端性能优化总结
2017/12/05 Javascript
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
mpvue开发音频类小程序踩坑和建议详解
2019/03/12 Javascript
详解React服务端渲染从入门到精通
2019/03/28 Javascript
在Vue中使用antv的示例代码
2020/06/29 Javascript
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
python http基本验证方法
2018/12/26 Python
python 字符串常用函数详解
2019/09/11 Python
基于python修改srt字幕的时间轴
2020/02/03 Python
什么是python的id函数
2020/06/11 Python
Stefania Mode英国:奢华设计师和时尚服装
2017/10/23 全球购物
新闻传媒系求职信范文
2014/04/19 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
瞿秋白纪念馆观后感
2015/06/10 职场文书
爸爸的三轮车观后感
2015/06/16 职场文书
关于实现中国梦的心得体会
2016/01/05 职场文书
古诗之感恩老师
2019/10/24 职场文书
详解Js模块化的作用原理和方案
2021/04/29 Javascript
我收到了德劲DE1107
2022/04/05 无线电