超棒的响应式布局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'});

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

赞 (0)

相关推荐

  • BootStrap响应式导航条实例介绍

    BootStrap响应式导航条实例介绍

    Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷.响应式导航条就是可以在不同的设备下查看不同的效果. 下面给大家分享代码: <header role="banner"> <nav role="navigation" class="navbar navbar-default"> <div c

  • 使用bootstrap3开发响应式网站

    使用bootstrap3开发响应式网站

    本文实例为大家分享了bootstrap3响应式网站开发代码,供大家参考,具体内容如下 第一次使用bootstrap3,发现对移动支持得不错,可以很快的开发出一个支持移动和PC端的网站. 下面就是本文的实例,具体代码: 时间线来自国外网站,使用到的css如下 .timeline { list-style: none; padding: 20px 0 20px; position: relative; } .timeline:before { top: 0; bottom: 0; position:

  • bootstrap网页框架的使用方法

    本文为大家分享了网页框架bootstrap的简单使用方法,供大家参考,具体内容如下 直接百度bootstrap可以搜到bootstrap中文网站,然后最好建议选择下载源码. 下载完成后,将dist/css/bootstrap.min.css复制到项目的根目录下. 具体的模块介绍和使用在中文网站上都有讲述,这里以制作的一个简单示例为例: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&

  • 20分钟成功编写bootstrap响应式页面 就这么简单

    20分钟成功编写bootstrap响应式页面 就这么简单

    最近发现一个叫 Bootstrap 的好东西,Bootstrap 是现在最流行的响应式 CSS 框架,它以移动设备优先,能够快速适应不同设备.使用它编写响应式页面快捷.方便,而且屏蔽了浏览器差异.使用了 Bootstrap 后,再也无法想象过去使用原始的 CSS 编写网页的悲惨生活了. 经过学习,我发现自己也具备了分分钟开发出一个高大上的页面的能力.本文将会为大家介绍 Bootstrap,并且带领大家一起实现一个响应式页面. 图 1. 移动优先,适应不同设备 一.安装 最简单的方式是直接在网页中

  • 原生JS实现响应式瀑布流布局

    原生JS实现响应式瀑布流布局

    原生JS实现的瀑布流布局,代码及demo代码地址:https://github.com/leozdgao/responsive_waterfall Demo:http://leozdgao.github.io/demo/responsive_waterfall/ 演示图: 核心代码: responsive_waterfall.js (function() { var Waterfall = function(opts) { var minBoxWidth; Object.defineProper

  • avalonjs制作响应式瀑布流特效

    avalonjs制作响应式瀑布流特效

    布局不是基于float,也不是基于绝对定位,看最下面的html,css就知道了.也没有满篇烦人的html插入,代码很清爽 function getIndex(index) { if (index < 10) { index = "00" + index; } else if (index < 100) { index = "0" + index; } return index; } var $ = function(id) { return docume

  • 开启BootStrap学习之旅

    开启BootStrap学习之旅

    本文总结了Bootstrap之所以广泛流传的11大原因.如果你还没有使用Twitter Bootstrap,建议你去了解一下.我也是最近才有所发现的,不过有更好的消息,在前两天微软发布的VS2013正式版中,也已经将BootStrap3.0的版本加入了额,连微软都看到bootStrap的强大,而且它的确很不错,所以我也不得不学习.这里有我对VS2013更新的简要介绍,有兴趣的话你可以看一眼Visual Studio 2013更新内容简介 bootstrap深受广大屌丝喜爱的原因到底是什么呢 1.

  • Bootstrap每天必学之响应式导航、轮播图

    本节课前一节我们开始设计第一个项目, 一个内训公司的企业网站, 本节课学习响应式导航部分. 基本导航组件+响应式: //基本导航组件+响应式 <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a href="#" class=

  • CSS3+Js实现响应式导航条

    CSS3+Js实现响应式导航条

    今天制作了一个响应式导航条,能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式,这里主要用到的就是CSS3的Media Query.具体可以查看浅谈响应式布局这篇文章,这里就不花费大量的篇幅介绍了,主要看一下这个导航条该怎么做. 另外需要提到的是,ie6-ie8是不支持CSS3的Media Query的,因此对于ie6-ie8我们需要特殊处理,就让他们保持默认样式,这对于布局及样式上都要考虑到这一点. 首先看一下布局这一块,html代码如下: 复制代码 代码如下: <div c

  • Bootstrap实现响应式导航栏效果

    Bootstrap实现响应式导航栏效果

    为了给导航栏添加响应式特性,您要折叠的内容必须包裹在带有 classes .collapse..navbar-collapse 的 <div> 中.折叠起来的导航栏实际上是一个带有class .navbar-toggle 及两个 data- 元素的按钮.第一个是 data-toggle,用于告诉 JavaScript 需要对按钮做什么,第二个是 data-target,指示要切换到哪一个元素.三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮.这些会切换

随机推荐