什么是 muuri
muuri 是一个基于 JavaScript 的响应式、可排序和过滤的网格布局库。它支持拖放和动画效果，并且能够自适应不同大小的屏幕。在前端开发中，muuri 可以用来创建美观、交互性强的页面布局。
安装 muuri
你可以使用 npm 命令来安装 muuri：
npm install muuri
使用 muuri
在 HTML 中引入 muuri 的 CSS 和 JavaScript 文件：
<link rel="stylesheet" href="path/to/muuri.css"> <script src="path/to/muuri.js"></script>
然后，在 JavaScript 中初始化 muuri：
var grid = new Muuri('.grid', {
layout: {
fillGaps: true
}
});这里的 .grid 是一个包含所有网格元素的容器。fillGaps 属性表示是否自动填充空白区域。
拖放和排序
muuri 支持拖放和排序功能。你可以通过设置 dragEnabled 和 sortData 属性来启用这些功能。
-- -------------------- ---- -------
--- ---- - --- -------------- -
------------ -----
--------- -
----- -------- ------ -------- -
------ -----------------------------------------
--
------ -------- ------ -------- -
------ ------------------------------------------------------
-
-
---这里的 dragEnabled 表示是否启用拖放功能，sortData 则是定义每个网格元素的排序属性。在 HTML 中，你需要为每个网格元素添加一个拖动句柄：
<div class="item"> <div class="handle"></div> <div class="name">Product A</div> <div class="price">$10.00</div> </div>
过滤
muuri 可以根据指定的条件来过滤网格元素。你可以使用 filter 方法来实现这一功能。
grid.filter(function (item) {
return item.getElement().querySelector('.category').innerHTML === 'electronics';
});这里的 filter 方法接受一个函数作为参数，该函数返回 true 或 false，表示该元素是否应该被过滤。在 HTML 中，你需要为每个网格元素添加一个类别标签：
<div class="item electronics"> <div class="name">Product B</div> <div class="price">$20.00</div> <div class="category">electronics</div> </div>
动画效果
muuri 支持各种各样的动画效果。你可以通过设置 dragSortInterval 和 dragReleaseDuration 属性来控制拖放时的动画效果，通过设置 layoutDuration 属性来控制布局更改时的动画效果。
var grid = new Muuri('.grid', {
dragEnabled: true,
dragSortInterval: 50,
dragReleaseDuration: 200,
layoutDuration: 400,
layoutEasing: 'ease'
});示例代码
下面是一个完整的示例代码，包含拖放、排序和过滤功能：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------ ------------
----- ---------------- -------------------------------------------------------------
-------
----- -
-------- -----
---------- -----
------- ------
-
----- -
------ ------------ - ------
------- -----
-------- -----
----------------- --------
----------- - --- --- ------- -- -- ------
-
------- -
------- -----
------- -----
------ -----
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------