超棒的响应式布局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学习4 浏览器的事件模型
Feb 07 Javascript
javascript 使td内容不换行不撑开
Nov 29 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
Aug 20 Javascript
javascript比较两个日期的先后示例代码
Dec 31 Javascript
JavaScript学习笔记之JS事件对象
Jan 22 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
Oct 18 Javascript
Angular4实现图片上传预览路径不安全的问题解决
Dec 25 Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 Javascript
js中Function引用类型常见有用的方法和属性详解
Dec 11 Javascript
js cavans实现静态滚动弹幕
May 21 Javascript
JS图片懒加载技术实现过程解析
Jul 27 Javascript
浅析JavaScript 函数柯里化
Sep 08 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利用iframe实现无刷新文件上传功能的代码
2011/09/29 PHP
PHP使用CURL实现对带有验证码的网站进行模拟登录的方法
2014/07/23 PHP
PHP中ltrim与rtrim去除左右空格及特殊字符实例
2016/01/07 PHP
PHP获取客户端及服务器端IP的封装类
2016/07/21 PHP
PHP实现阿里大鱼短信验证的实例代码
2017/07/10 PHP
javascript 学习之旅 (2)
2009/02/05 Javascript
实现超用户体验 table排序javascript实现代码
2009/06/22 Javascript
Javascript图像处理—平滑处理实现原理
2012/12/28 Javascript
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
js全屏显示显示代码的三种方法
2013/11/11 Javascript
JavaScript中遍历对象的property的3种方法介绍
2014/12/30 Javascript
jQuery三级下拉列表导航菜单代码分享
2020/04/15 Javascript
jQuery平滑旋转幻灯片特效代码分享
2015/09/07 Javascript
jQuery validate插件功能与用法详解
2016/12/15 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
2017/04/24 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
2017/07/07 Javascript
Vue组件之Tooltip的示例代码
2017/10/18 Javascript
JavaScript设计模型Iterator实例解析
2020/01/22 Javascript
[03:00]DOTA2-DPC中国联赛1月18日Recap集锦
2021/03/11 DOTA
浅谈Python中的闭包
2015/07/08 Python
Python设计足球联赛赛程表程序的思路与简单实现示例
2016/06/28 Python
Android基于TCP和URL协议的网络编程示例【附demo源码下载】
2018/01/23 Python
python 变量初始化空列表的例子
2019/11/28 Python
python 输出列表元素实例(以空格/逗号为分隔符)
2019/12/25 Python
在Matplotlib图中插入LaTex公式实例
2020/04/17 Python
keras输出预测值和真实值方式
2020/06/27 Python
Python requests模块安装及使用教程图解
2020/06/30 Python
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
数控个人求职信范文
2014/02/03 职场文书
餐饮投资计划书
2014/04/25 职场文书
撤诉申请书法院范本
2015/05/18 职场文书
2015年学校减负工作总结
2015/05/19 职场文书
导游词之吉林吉塔
2019/11/11 职场文书
详解python字符串驻留技术
2021/05/21 Python
Python3.10的一些新特性原理分析
2021/09/15 Python