Freewall 跨浏览器和响应的网格布局瀑布流 jQuery 插件

发布于 2020-03-07 11:11:22 字数 7030 浏览 1514 评论 0

Freewall 是一个跨浏览器和响应的 jQuery 插件，帮助您创建许多类型的网格布局：灵活的布局，图像布局，嵌套网格布局，地铁样式布局，Pinterest 类布局，具有很好的 CSS3 动画效果和回调事件。Freewall 是为桌面、移动和平板电脑创建动态网格布局的一种解决方案。

它是如何工作的

根据容器的宽度(或高度)和单元格单元的宽度(高度)，它将创建虚拟矩阵。在每个单元格上扫描矩阵会发现周围有一个自由的单元格，从而形成一个自由区域，然后尝试在其中加入一个块元素。如果没有一个块能够适应这个缺口，它将调整块的大小以填补空白，这是选项之一。

特征

拖曳支撑
方向支撑
自定义插件
响应网格
间隙控制
过滤项
CSS3动画
嵌套网格
图像网格/布局
适合容器
垂直网格/布局
水平网格/布局
扁平化风格
类似 Pinterest 的网格/布局

开始使用

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.fitWidth();
    });
  </script>
</body>
</html>

Events 监听函数

onGapFound

Registry callback when a gap found.

onComplete

Registry callback when all block arrange.

onResize

Registry callback when browser resize.

Example

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

onBlockReady

Fire when block adjusted.

onBlockActive

Fire before block show or hide in the layout.

onBlockFinish

Fire when block finish show or hide in the layout.

onBlockResize

Fire when block changes the size to fills a gap.

onBlockMove

Fire when block moves by dragging.

Options 可选参数

All options are parameters of Reset method

draggable : boolean

Default: false
True: to make block can be drag & drop

animate : boolean

True: to make block move with animation

cellW: mix

Default: 100
The width of unit, base on it will build grid container. It can be a function and return value.

Example

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

cellH: mix

Default: 100
The height of unit, base on it will build grid container. It can be a function and return value.

delay : number

Default: 0
The time delay for show block. It will increase by each block.

fixSize : boolean

Default: null
value is null or not set let blocks can adjust and resize to fill gap
value is 0 or false let blocks can adjust size but can't resize to fill gap.
value is 1 or true let blocks keep the size as init, can't resize to fill gap.
Can override the fixSize option by set data-fixSize attribute in the block.

Example

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

gutterX : mixed

Default: 10
The horizon spacing between the column. Default is number, but can set it with 'auto' value.

gutterY : mixed

Default: 10
The vertical spacing between the row. Default is number, but can set it with 'auto' value.

selector : string

Get all blocks to made layout

Example

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

cacheSize : boolean

Default: true
True: will caches the with and height of block for next time

keepOrder : boolean

Keep the order as same as HTML structure

rightToLeft : boolean

Default: false
True: let layout start render from right to left

bottomToTop : boolean

Default: false
True: let layout start render from bottom up to top

Methods 方法函数

addCustomEvent(name, handler)

Support create custom event when arrange layout

appendBlock(items)

Append one or more items into layout

appendHoles(holes)

Add one or more blank area into layout

fillHoles()

Let layout without gaps

filter(selector)

Fillter blocks to show

fireEvent()

Fire custom event

fitHeight(height)

Made the layout fit with limit height

fitWidth(width)

Made the layout fit with limit width

fitZone(width, height)

Made the layout fit with limit width and height

fixPos(object)

Set a block at fixed position, top/left is multiple of cell with/height

fixSize(object)

Set a block with special width or height

Example

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()

rearrange layout

reset(options)

Config options for render layout.

Example

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)

Set the holes on layout

unFilter()

Made all block to show

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态，并将以不断告别和相遇的陈旧方式继续下去。

0 文章

0 评论

84960 人气

关注发私信

友情链接

文江博客

Freewall 跨浏览器和响应的网格布局瀑布流 jQuery 插件

它是如何工作的

特征

开始使用

Events 监听函数

onGapFound

onComplete

onResize

Example

onBlockReady

onBlockActive

onBlockFinish

onBlockResize

onBlockMove

Options 可选参数

draggable : boolean

animate : boolean

cellW: mix

Example

cellH: mix

delay : number

fixSize : boolean

Example

gutterX : mixed

gutterY : mixed

selector : string

Example

cacheSize : boolean

keepOrder : boolean

rightToLeft : boolean

bottomToTop : boolean

Methods 方法函数

addCustomEvent(name, handler)

appendBlock(items)

appendHoles(holes)

fillHoles()

filter(selector)

fireEvent()

fitHeight(height)

fitWidth(width)

fitZone(width, height)

fixPos(object)

fixSize(object)

Example

prepend(items)

refresh()

reset(options)

Example

setHoles(hole)

unFilter()

相关链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

你可能也喜欢

发布评论

关于作者

热门标签

推荐作者

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。