介绍

Muuri是一个JavaScript布局引擎，可让你构建各种布局并使其具有响应性，可排序，可过滤，可拖动和/或动画化。Muuri是Packery, Masonry, Isotope 和Sortable的组合。Muuri使用Web_Animations_API制作动画，并具有处理拖动的内部机制。

Github

https://github.com/haltu/muuri

相关特性

• 可定制的布局

Muuri的布局系统允许将网格项目以几乎任何可以想象的方式放置在容器中。

• 拖放

内置支持拖放网格项目。

• 广泛且丰富的API

具有足够方法和事件的扩展API，可以完全控制库的行为。

• 快速的动画

快速定位，显示和隐藏由Web Animations驱动的动画。

• 良好的浏览器支持

在所有现代浏览器和IE9 +（需要用于Web动画的polyfill和请求动画框架）中均可使用。

• 完全开源

Muuri MIT licensed

效果一览

快速入门

• 1、使用npm安装（或者使用打包好的压缩过的js文件或者使用cdn服务）

npm install muuri

• 2、安装Web Animations Polyfill（如果需要）

Muuri默认情况下使用Web Animations处理所有动画。如果需要在不支持Web动画的浏览器上使用Muuri，则需要使用polyfill。

npm install web-animations-js

• 3、添加引用

在您的网站上添加Muuri，并确保在Muuri之前包含Web AnimationsPolyfill（如果需要）

• 4、添加标记

每个网格必须具有一个容器元素。网格项必须始终至少包含两个元素。外部元素用于放置项目，内部元素（第一个直接子对象）用于设置项目的可见性动画（显示/隐藏方法）。可以在内部item元素内插入任何所需的标记。

<div class="grid">
 <div class="item">
 <div class="item-content">
 <!-- 安全区域，输入自定义标记 -->
 这可以是任何东西
 <!-- Safe zone ends -->
 </div>
 </div>
 <div class="item">
 <div class="item-content">
 <!-- 安全区域，输入自定义标记 -->
 <div class="my-custom-content">
 Yippee!
 </div>
 <!-- 安全区末尾-->
 </div>
 </div>
 </div>

• 5、添加样式

a、容器元素必须“定位”，这意味着它的CSS位置属性必须设置为相对，绝对或固定。还要注意，Muuri会根据项目覆盖的区域和布局算法配置自动调整容器元素的宽度/高度。

b、item元素的CSS位置必须设置为absolute ，其display属性必须设置为block。Muuri实际上强制执行display：block;以防万一，并将其??作为内联样式添加到所有项目元素中。

c、item元素必须没有应用CSS过渡或动画，因为它们可能与Muuri的内部动画引擎冲突。但是，如果您希望在布局操作后更改其大小时对其进行动画处理，则可以对容器元素应用过渡。

d、可以通过给item元素留一些边距来控制item之间的间隙。

e、永远不设置overflow: auto; 或 overflow: scroll到容器元素。Muuri的计算逻辑不能解决这个问题。

• 6、最简单的配置

必须始终提供容器元素（或选择器，以便Muuri可以为您获取该元素），其他所有内容都是可选的。

var grid = new Muuri('.grid');

更多详细的配置或者API请参阅Github上提供的非常详细的相关文档，这是一个非常值得使用的网格布局引擎！

总结

Muuri用于创建响应式，可排序，可过滤和可拖动的网格布局。Muuri有大量的单元测试，它已经准备好了，你可以将它用于任何项目中，完全开源！