Muuri

Muuri 介绍

Muuri 是一个响应式，可排序，可过滤和可拖动的网格布局。 Muuri 的布局系统允许以几乎任何可想象的方式将网格项目定位在容器内。你也可以提供自己的布局算法，以任何方式定位项目。相比之下，Muuri 是一个组合的包装：Packery ， Masonry， Isotope 和 jQuery UI 排序。  

用法

引入文件

Muuri依赖于以下库：

VeLocity (1.2.x)

Hammer.js (2.0.x) 可选，仅当你使用拖动功能时才需要

引入文件：

<script src="veLocity.js"></script>

<script src="hammer.js"></script>

<!-- 需要在body元素内，或者访问body元素 -->

<script src="muuri.js"></script>

将 Muuri 包含在网站中的一个重要注意事项是，它需要在载入时访问 body 元素。 Muuri 在初始化上做一些功能检查，如果它不能访问 body 元素，可能无法正常工作。

html

每个网格必须在容器元素内具有容器元素和项目元素。

网格项必须始终由至少两个元素组成。外部元素用于定位项目，内部元素（第一个直接子项）用于动画项目的可见性（显示/隐藏方法）。你可以在内部项目元素中插入任何所需的标记。

<div class="grid">

<div class="item">

<div class="item-content">

This can be anything.

</div>

</div>

<div class="item">

<div class="item-content">

<div class="my-custom-content">

Yippee!

</div>

</div>

</div>

</div>

css

网格元素必须“定位”，这意味着它的 css 位置属性必须设置为 relative ， absolute 或 fixed 。还要注意， Muuri 根据项目覆盖的区域自动调整容器元素的大小。

项目元素必须将其 css 位置设置为绝对，并将其显示属性设置为块，除非元素的显示设置为固有的块。

item 元素不能有任何 css 过渡或动画应用于它们，因为它可能与 VeLocity 的动画冲突。

你可以通过给项目元素留一些边距来控制图块之间的间隙。

.grid {

position: relative;

}

.item {

display: block;

position: absolute;

width: 100px;

height: 100px;

margin: 5px;

z-index: 1;

}

.item.muuri-dragging,

.item.muuri-releasing {

z-index: 2;

}

.item.muuri-hidden {

z-index: 0;

}

.item-content {

position: relative;

width: 100%;

height: 100%;

}

js

最后，启动Muuri实例。

最低配置如下所示。你必须始终向容器元素和初始项目元素提供 Muuri 。

请务必查看所有可用的选项，方法和事件。

var grid = new Muuri({

container: document.getElementsByClassName('grid')[0],

// Muuri does not convert a node list to array automatically

// so we have to do it manually.

items: [].slice.call(document.getElementsByClassName('item'))

});

网站地址:http://haltu.github.io/muuri/

GitHub:https://github.com/haltu/muuri

网站描述:响应式,可排序,可过滤和可拖动的网格布局

Muuri

官方网站：http://haltu.github.io/muuri/