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

  • Z时代
  • 2024-01-10
  • 分类：IT

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

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

它是如何工作的

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

特征

  • 拖曳支撑

  • 方向支撑

  • 自定义插件

  • 响应网格

  • 间隙控制

  • 过滤项

  • 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

相关链接

  • Github 地址：https://github.com/kombai/freewall

  • 在线实例：https://www.wenjiangs.com/wp-content/uploads/2020/03/freewall/

  • 本地下载：https://www.wenjiangs.com/wp-content/uploads/2020/03/freewall.zip

以上是 Freewall 跨浏览器和响应的网格布局瀑布流 jQuery 插件 的全部内容， 来源链接： utcz.com/p/232443.html

回到顶部