Free Wall 中文网

构建动态网格布局.

什么是 Freewall?

Freewall 是一个跨浏览器和响应式 jQuery 插件,它可以帮助您创建多种类型的网格布局:灵活的布局,图像布局,嵌套的网格布局,Metro 样式布局,pinterest 之类的布局…… 具有不错的 CSS3 动画效果和回调事件。Freewall 是用于为台式机,移动设备和平板电脑创建动态网格布局的多合一解决方案。

一些示例布局:


工作原理

根据容器的宽度(或高度)和块单元的宽度(高度),它将创建一个虚拟矩阵。扫描每个单元矩阵并计算它的周围空间,以形成一个自由区域,然后尝试将块元素装配到其中。如果没有任何块可以填满该间隙,它将调整该块的大小以填补该间隙(需选项设置)。

分享

Google +

特性

  • 支持拖拽
  • Direction support
  • 自定义插件
  • 响应式网格
  • 间隙控制
  • 元素过滤
  • CSS3 动画 (js fallback)
  • 嵌套网格
  • 图片 网格/布局
  • 容器位置
  • 垂直 网格/布局
  • 水平 网格/布局
  • Window metro 风格
  • 瀑布流网格/布局

选项

  • draggable
  • animate
  • cellW
  • cellH
  • delay
  • fixSize
  • gutterX
  • gutterY
  • selector
  • keepOrder
  • cacheSize
  • rightToLeft
  • bottomToTop
查看更多 ...

选项

所有的选项均为 Reset 方法的参数

  • draggable : boolean

    默认: false
    True: 是区块可以拖放
  • animate : boolean

    默认: false
    True: 区块移动时产生动画效果
  • cellW: mix

    默认: 100
    单元宽度单位, 布局容器内的网格单元宽度。 它可以是一个函数的返回值。

    示例

    										
    var wall = new Freewall('.free-wall');
    wall.reset({
      selector: '.brick',
      cellW: function(width) {
      	  // width 为 .free-wall 容器宽度
          var cellWidth = width / 3;
          return cellWidth - 20;
        },
      cellH: 160
    });
    										
    									
  • cellH: mix

    默认: 100
    单元高度单位, base on it will build grid container. 它可以是一个函数的返回值。
  • delay : number

    默认: 0
    当一个区块移动显示后,下一个区块移动显示的延时时间。
  • fixSize : boolean

    默认: null
    值为空或未设置 区块可以调整和改变大小以填充间隙。
    值为 0 或 false 时,允许块调整大小,但不能改变大小以填充间隙。
    值为 1 或 true 时,区块保持大小为初始值,无法改变大小以填充间隙。
    可以通过设置 data-fixSize 属性来覆盖 fixSize 选项。

    示例

    										
    <div class="brick size22" data-fixSize=true>
      <div class='cover'>
        <div class="item size12"></div>
        <div class="item size12"></div>
      </div>
    </div>
    										
    									
  • gutterX : mixed

    默认: 10
    列之间的水平间距 默认值是数值,也可以使用 “auto” 值。
  • gutterY : mixed

    默认: 10
    行之间的垂直间距 默认值是数值,也可以使用 “auto” 值。
  • selector : string

    需要进行布局的块对象。
  • 示例

    									
    var wall = new Freewall('.free-wall');
    wall.reset({
      selector: '.brick',
      animate: true,
      cellW: 150,
      cellH: 150,
      gutterY: 10,
      gutterX: 'auto'
    });
    									
    								
  • cacheSize : boolean

    默认: true
    True: 将缓存区块的宽度和高度为下一次布局使用
  • keepOrder : boolean

    保持与 HTML 结构一样的顺序
  • rightToLeft : boolean

    默认: false
    True: 让布局从右到左开始渲染
  • bottomToTop : boolean

    默认: false
    True: 让布局从下到上开始渲染

事件

  • onGapFound
  • onComplete
  • onResize
  • onBlockReady
  • onBlockActive
  • onBlockFinish
  • onBlockResize
  • onBlockMove
查看更多 ...

事件

  • onGapFound

    发现间隙时的回调函数。
  • onComplete

    所有块完成排列时的回调函数。
  • onResize

    浏览器调整大小时的回调函数。
  • 示例

    									
    var wall = new Freewall('.free-wall');
    wall.reset({
      selector: '.brick',
      onResize: function() {
        this.fitWidth();
      }
    });
    									
    								
  • onBlockReady

    当调整块时触发
  • onBlockActive

    当块在显示或隐藏在布局中之前触发。
  • onBlockFinish

    当块在布局中完成显示或隐藏时触发。
  • onBlockResize

    当块改变大小以填补空白时触发。
  • onBlockMove

    当块通过拖动移动时触发。

方法

  • addCustomEvent
  • appendBlock
  • appendHoles
  • fillHoles
  • filter
  • fireEvent
  • fitHeight
  • fitWidth
  • fitZone
  • fixPos
  • fixSize
  • prepend
  • refresh
  • reset
  • setHoles
  • unFilter
查看更多 ...

方法

  • addCustomEvent(name, handler)

    支持在排列布局时创建自定义事件
  • appendBlock(items)

    追加一个或多个块到布局
  • appendHoles(holes)

    Add one or more blank area into layout
  • fillHoles()

    让布局没有间隙
  • filter(selector)

    过滤显示块
  • fireEvent()

    触发自定义事件
  • fitHeight(height)

    设置布局容器的高度
    不设置自动取容器高度 || 窗口高度
  • fitWidth(width)

    设置布局容器的宽度
    不设置自动取容器宽度 || 窗口宽度
  • fitZone(width, height)

    fitWidth 和 fitHeight 功能的结合体
  • fixPos(object)

    设置区块的位置, top/left is multiple of cell with/hei
  • fixSize(object)

    设置指定区块的宽度和高度
    示例
    									
    var wall = new Freewall('.free-wall');
    var dna = $(".free-wall .flex-layout");
    wall.unsetFilter();
    wall.fixSize({
      block: dna,
      width: 150,
      height: 150
    });
    wall.fitWidth();
    									
    								
  • prepend(items)

    Prepend one or more items into layout
  • refresh()

    重新排列布局
  • reset(options)

    渲染布局的配置选项
    示例
    									
    var ewall = new Freewall(demo);
    var demo = $(".example");
    ewall.reset({
      selector: '.cell',
      animate: true,
      delay: 20,
      cellW: 15.5,
      cellH: 15,
      gutterX: 2,
      gutterY: 2
    });
    ewall.fitWidth(cwidth);
    									
    								
  • setHoles(hole)

    在布局上设置空白区域
  • unFilter()

    显示所有块

浏览器支持

  • Chrome
  • Opera
  • Safari
  • IE 8.0+
  • Firefox

示例

拖放
查看更多 ...

版权

© 2016 Minh Nguyen

根据 MIT 许可发布