超棒的响应式布局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查看对象功能代码
Apr 25 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
Apr 02 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
May 17 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
Jan 02 Javascript
jQuery插件jRumble实现网页元素抖动
Jun 05 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
Nov 30 Javascript
详解JS构造函数中this和return
Sep 16 Javascript
EasyUI实现下拉框多选功能
Nov 07 Javascript
Vue中的Vux配置指南
Dec 08 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
Jul 25 Javascript
在Vue mounted方法中使用data变量详解
Nov 05 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中iconv函数使用方法
2008/05/24 PHP
PHP 翻页 实例代码
2009/08/07 PHP
thinkphp实现面包屑导航(当前位置)例子分享
2014/05/10 PHP
Destoon模板制作简明教程
2014/06/20 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
thinkphp5框架扩展redis类方法示例
2019/05/06 PHP
PHP7 弃用功能
2021/03/09 PHP
JS控件的生命周期介绍
2012/10/22 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
2014/03/05 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
javascript基础知识
2016/06/07 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
详解vue slot插槽的使用方法
2017/06/13 Javascript
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
vue-cli+webpack项目 修改项目名称的方法
2018/02/28 Javascript
Vue.js实现数据响应的方法
2018/08/13 Javascript
Nuxt.js SSR与权限验证的实现
2018/11/21 Javascript
vue实现鼠标移入移出事件代码实例
2019/03/27 Javascript
vue实现微信分享链接添加动态参数的方法
2019/04/29 Javascript
利用Electron简单撸一个Markdown编辑器的方法
2019/06/10 Javascript
浏览器JavaScript调试功能无法使用解决方案
2020/09/18 Javascript
Python中AND、OR的一个使用小技巧
2015/02/18 Python
django解决跨域请求的问题详解
2019/01/20 Python
Python 写了个新型冠状病毒疫情传播模拟程序
2020/02/14 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
2016/11/16 HTML / CSS
Beach Bunny Swimwear官网:设计师泳装和性感比基尼
2019/03/13 全球购物
学习决心书
2014/03/11 职场文书
企业法人代表任命书
2014/06/06 职场文书
2014大学生批评与自我批评思想汇报
2014/09/21 职场文书
2014年党员个人剖析材料
2014/10/08 职场文书
2014年服务员个人工作总结
2014/12/23 职场文书
幼儿园安全工作总结2015
2015/04/20 职场文书
php中配置文件保存修改操作 如config.php文件的读取修改等操作
2021/05/12 PHP
python 判断文件或文件夹是否存在
2022/03/18 Python