Freewall - 中文网创建动态网格布局的 jQuery 插件

什么是 Freewall？

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

一些示例布局：

工作原理

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

开始

Freewall 需要 jQuery 或 Zepto 库支持。它需要支持 CSS3 的浏览器来获得一些好的动画效果。

								
<!DOCTYPE html>
<html>
<head>
  <title> freewall demo getting started</title>
  <script src="js/jquery-1.10.2.min.js"></script>
  <script src="../freewall.js"></script>
  <style type="text/css">
    #container {
      width: 80%;
      margin: auto;
    }
    .item {
      background: rgb(135, 199, 135);
      width: 320px;
      height: 320px;
    }
  </style>
</head>
<body>
  <div id="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <script>
    $(function() {
      var wall = new Freewall("#container");
      wall.reset({
        onResize: function() {
          this.fitWidth();
        }
      });
      wall.fitWidth();
    });
  </script>
</body>
</html>

特性

支持拖拽
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

示例

拖放

版权

根据 MIT 许可发布

Free Wall 中文网

什么是 Freewall？

一些示例布局：

Flex 弹性布局

Window 风格

图片布局

瀑布流布局

工作原理

分享

下载

开始

特性

选项

选项

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

draggable : boolean

animate : boolean

cellW: mix

示例

cellH: mix

delay : number

fixSize : boolean

示例

gutterX : mixed

gutterY : mixed

selector : string

示例

cacheSize : boolean

keepOrder : boolean

rightToLeft : boolean

bottomToTop : boolean

事件

事件

onGapFound

onComplete

onResize

示例

onBlockReady

onBlockActive

onBlockFinish

onBlockResize

onBlockMove

方法

方法

addCustomEvent(name, handler)

appendBlock(items)

appendHoles(holes)

fillHoles()

filter(selector)

fireEvent()

fitHeight(height)

fitWidth(width)

fitZone(width, height)

fixPos(object)

fixSize(object)

示例

prepend(items)

refresh()

reset(options)

示例

setHoles(hole)

unFilter()

浏览器支持

示例

示例

示例

示例

示例

示例

示例

示例

示例

示例

示例

示例

示例

示例

版权