【亲测免费】 Muuri 项目使用教程

2026-01-18 09:50:25作者：凤尚柏Louis

Infinite responsive, sortable, filterable and draggable layouts

项目地址：https://gitcode.com/gh_mirrors/mu/muuri

项目介绍

Muuri 是一个开源的 JavaScript 库，它结合了 Packery、Masonry、Isotope 和 Sortable 的功能，提供了无限响应、可排序、可过滤和可拖拽的布局。Muuri 的核心是一个布局引擎，它允许开发者构建几乎任何想象中的布局。Muuri 的目标是提供一个简单且低级别的 API，以便构建高性能的布局，同时将大部分复杂性抽象化。

项目快速启动

安装 Muuri

首先，你需要在你的项目中安装 Muuri。你可以通过 npm 安装，也可以直接从 CDN 引入。

npm install muuri

或者直接在 HTML 文件中引入：

<script src="https://cdn.jsdelivr.net/npm/muuri@0.9.5/dist/muuri.min.js"></script>

基本使用

以下是一个简单的示例，展示如何使用 Muuri 创建一个基本的网格布局。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Muuri 示例</title>
  <style>
    .grid {
      position: relative;
    }
    .item {
      display: block;
      width: 100px;
      height: 100px;
      margin: 5px;
      background: #000;
      color: #fff;
      text-align: center;
      line-height: 100px;
    }
  </style>
</head>
<body>
  <div class="grid">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/muuri@0.9.5/dist/muuri.min.js"></script>
  <script>
    var grid = new Muuri('.grid');
  </script>
</body>
</html>

应用案例和最佳实践

应用案例

Muuri 可以用于构建各种复杂的布局，例如：

看板（Kanban）布局：用于任务管理和项目跟踪。
图片墙：用于展示图片集合，支持拖拽和排序。
电子商务网站：用于展示商品，支持过滤和排序。

最佳实践

性能优化：Muuri 提供了高效的布局和动画处理，但在处理大量 DOM 元素时，仍需注意性能优化。
自定义布局：Muuri 允许你提供自定义的布局函数，以实现特定的布局需求。
响应式设计：确保你的布局在不同设备和屏幕尺寸下都能良好工作。

典型生态项目

Muuri 作为一个强大的布局引擎，可以与其他项目结合使用，例如：

Web Animations Polyfill：用于在不支持 Web Animations API 的浏览器中提供动画支持。
Packery 和 Masonry：用于实现瀑布流布局。
Isotope：用于实现过滤和排序功能。

通过结合这些项目，你可以构建出更加复杂和功能丰富的布局。

以上是 Muuri 项目的使用教程，希望对你有所帮助。

Infinite responsive, sortable, filterable and draggable layouts

项目地址：https://gitcode.com/gh_mirrors/mu/muuri

登录后查看全文

项目优选

收起

deepin linux kernel

Claude Code 的开源替代方案。连接任意大模型，编辑代码，运行命令，自动验证 — 全自动执行。用 Rust 构建，极致性能。｜ An open-source alternative to Claude Code. Connect any LLM, edit code, run commands, and verify changes — autonomously. Built in Rust for speed. Get Started

openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。

本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。

Ascend Extension for PyTorch

🎉 (RuoYi)官方仓库基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统

🍒 Cherry Studio 是一款支持多个 LLM 提供商的桌面客户端

AI 将任意文档转换为精美可编辑的 PPTX 演示文稿 — 无需设计基础 | 包含 15 个案例、229 页内容

flutter_flutter