超棒的响应式布局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 分页全选或反选标识实现代码
Aug 09 Javascript
数据结构中的各种排序方法小结(JS实现)
Jul 23 Javascript
jquery siblings获取同辈元素用法实例分析
Jul 25 Javascript
Bootstrap路径导航与分页学习使用
Feb 08 Javascript
浅谈js中同名函数和同名变量的执行问题
Feb 12 Javascript
AngularJS表格样式简单设置方法示例
Mar 03 Javascript
js中setTimeout的妙用--防止循环超时
Mar 06 Javascript
JS正则替换去空格的方法
Mar 24 Javascript
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
JavaScript链式调用实例浅析
Dec 19 Javascript
解决Vue项目中tff报错的问题
Oct 21 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环境套包 dedeampz 伪静态设置示例
2014/03/26 PHP
PHP编程实现的TCP服务端和客户端功能示例
2018/04/13 PHP
PHP FileSystem 文件系统常用api整理总结
2019/07/12 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
详解phpstorm2020最新破解方法
2020/09/17 PHP
超级简单的图片防盗(HTML),好用
2007/04/08 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
2013/03/11 Javascript
jQuery中:header选择器用法实例
2014/12/29 Javascript
iPhone手机上搭建nodejs服务器步骤方法
2015/07/06 NodeJs
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
2016/01/05 Javascript
AngularJS 执行流程详细介绍
2016/08/18 Javascript
JS中正则表达式全局匹配模式 /g用法详解
2017/04/01 Javascript
nodejs multer实现文件上传与下载
2017/05/10 NodeJs
微信小程序中吸底按钮适配iPhone X方案
2017/11/29 Javascript
基于javascript实现贪吃蛇小游戏
2019/11/25 Javascript
Python深入学习之装饰器
2014/08/31 Python
python 计算文件的md5值实例
2017/01/13 Python
Python的地形三维可视化Matplotlib和gdal使用实例
2017/12/09 Python
python2.7到3.x迁移指南
2018/02/01 Python
Python使用Selenium模块实现模拟浏览器抓取淘宝商品美食信息功能示例
2018/07/18 Python
python cs架构实现简单文件传输
2020/03/20 Python
PyQt5 窗口切换与自定义对话框的实例
2019/06/20 Python
python交易记录链的实现过程详解
2019/07/03 Python
在tensorflow中实现屏蔽输出的log信息
2020/02/04 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
校园门卫岗位职责
2013/12/09 职场文书
优秀毕业生自荐信范文
2014/01/01 职场文书
竞选团支书演讲稿
2014/04/28 职场文书
维修工先进事迹
2014/05/29 职场文书
党支部2014年度工作总结
2014/12/04 职场文书
2014年园林绿化工作总结
2014/12/11 职场文书
毕业欢送会致辞
2015/07/29 职场文书
《清澈的湖水》教学反思
2016/02/17 职场文书
Windows 64位 安装 mysql 8.0.28 图文教程
2022/04/19 MySQL