超棒的响应式布局jQuery插件Freetile.js_jquery

在线演示

我们曾经介绍过俩款知名的响应式布局插: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'});

是不是很简单,有需要的话可以直接拿走哈,千万别跟我客气。

时间: 2024-11-29 00:24:57

超棒的响应式布局jQuery插件Freetile.js_jquery的相关文章

另外一款超棒的响应式布局jQuery插件 – Freetile.js

在线演示 我们曾经介绍过俩款知名的响应式布局插:isotope和masonary,今天我们这里再介绍一款相当不错的响应式布局插件 – Freetile.js,使用它同样可以生成超酷的动态布局效果.相信大家一定会喜欢! 主要特性 Freetie来自于Assemblage 和 Assemblage Plus的内建布局引擎,设计灵感来自于Masonry,VGrid和Wookmark,但是和他们相比较,拥有以下独特的地方: 允许包含任何尺寸的元素,并且不要求一个固定的列宽度,因此你不需要指定列宽度来迎合

《jQuery Mobile快速入门》—— 2.6 带有媒体查询的响应式布局

2.6 带有媒体查询的响应式布局 jQuery Mobile快速入门 要使用jQuery Mobile来创建响应式设计,建议使用CSS3 Media Queries1.例如,如果你打算为一个特定设备的朝向增强布局,你可以使用媒体查询来检测设备的朝向,然后根据需要应用你的 CSS修改. 在某些情况下,jQuery Mobile将会为你创建响应式设计.下面将讲解jQuery Mobile的响应式设计如何良好地应用于竖屏(portrait)模式和横屏(landscape)模式中的表单字段.例如,在竖屏

HTML5 respond.js 解决IE6~8的响应式布局问题

响应式布局,理想状态是,对PC/移动各种终端进行响应.媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然占据了比较大量的市场份额,使我们不得不进行IE低端浏览器的考虑. 那么如何在IE6~8浏览器中兼容响应式布局呢?这里我们需要借助这样一个文件:respond.js.文件下载地址:https://github.com/scottjehl/Respond. 友情提示各位朋友,关于respond.js的使用,有一些需要注意的地方,一旦不注意,在IE6-8中就无法显示出来. 一

10款非常有效的帮助你设计超酷响应式布局的jQuery插件

如 果你关注最近几年的web设计,那么响应式布局(responsive layout)设计对于你来说肯定不是一个陌生的词汇. 相对于传统的页面设计来说,今天的设计者需要考虑的用户来源和用户体验对于设计者来说是一个非常大的挑战,因为随着硬件的更新,新设备的出现,你需要能够 使得你的网站能够针对不同的设置做出最好显示响应.最初这个名称来自于Ethan Marcotte的文章"Responsive Web Design",设计的理念在于为了有效的利用空间和布局来满足用户阅读过程中产生的不同使

8款非常棒的响应式jQuery 幻灯片插件推荐_jquery

这篇文章收集了8款优秀的响应式 jQuery 幻灯片插件,它们能够非常容易的集成到 Web 项目中.响应式(Responsive)设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验. Flexslider FlexSlider 是一款非常棒的响应式 jQuery 幻灯片插件,能够自适应屏幕尺寸,呈现漂亮的外观. Blueberry Blueberry 是一款开源的 jQuery 图片幻灯片插件,适用于流体.响应式网页布局. unoslider 特别推

8款非常棒的响应式 jQuery 幻灯片插件推荐

这篇文章收集了8款优秀的响应式 jQuery 幻灯片插件,它们能够非常容易的集成到 Web 项目中.响应式(Responsive)设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验. Flexslider FlexSlider 是一款非常棒的响应式 jQuery 幻灯片插件,能够自适应屏幕尺寸,呈现漂亮的外观. Blueberry Blueberry 是一款开源的 jQuery 图片幻灯片插件,适用于流体.响应式网页布局. unoslider 特别推

超酷的响应式dribbble设计作品瀑布流布局效果

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 在线演示:gbin1.com/gb/share/360.htm 相信做设计的朋友肯定都知道dribbble.com,它是一个非常棒的设计师分享作品的网站,全世界数以万计的设计高手和行家都在这个网站上分享自己的作品,当然,如果你常在上面闲逛的话,经常得到一些免费的好东西. 在今天的这篇jQuery教程中,我们将使用jQuery的几个插件来开发一

必须收藏14款响应式布局的前端开发框架

前端开发并不是一个容易的工作,不仅需要掌握HTML.CSS和JavaScript,针对不同的浏览器版本和平台,还需要了解如何设计出跨平台的网站.如今随着响应式设计的流行,前端开发变得越来越困难,且花费的时间更长. 本文收集了14个响应式前端开发框架,可以帮助前端开发人员大大简化开发过程.针对每个框架,文中均指出了它所包含的UI组件及JavaScript插件.几乎所有的框架都采用了响应式网格系统. 使用这些前端框架,有如下好处: 跨浏览器.这一点已被证实. 一致性.UI组件,如导航.按钮.标签.表

BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)_javascript技巧

废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <title>bootstrap实现导航栏的响应式布局,当在小屏幕.手机屏幕浏览时自动折叠隐藏</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name=&q