Muuri 介绍
Muuri ?是 一个 响应式，可排序，可过滤和可拖动的网格布局。 Muuri 的布局系统允许以几乎任何可想象的方式将网格项目定位在容器内。你也可以提供自己的布局算法，以任何方式定位项目。相比之下，Muuri 是 一个 组合的包装： Packery ?，? Masonry ，? I soto pe ?和? jQuery UI ?排序。
用法
引入 文件Muuri依赖于以下库：
Ve Loci ty?(1.2.x)
Hammer.js?(2.0.x) 可选，仅当你使用拖动 功能 时才需要
引入 文件 ：
<script src="ve Loci ty.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 过渡或动画应用于它们，因为它可能与 Ve Loci ty 的动画冲突。
你可以通过给项目元素留一些边距来控制图块之 间的 间隙。
.grid {
position: relative;
}
.item {
dis play: 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/
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。