如何用 Material UI 的 Masonry 组件搭建响应式瀑布流布局含 SSR 场景【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-ui如果你的页面里有一批宽度一致、高度各不相同的卡片或图片需要按“瀑布流”方式排列Material UI 提供的Masonry组件可以直接完成这件事。它在mui/lab包中把任意子元素包括div /、img /排成宽度相同、高度可变的列块列与列之间的间距可配置。本文按官方文档docs/data/material/components/masonry/masonry.md及其示例代码给出从基础布局到响应式列数/间距、再到服务端渲染SSR场景的完整搭建过程。先了解 Masonry 的排列规则官方文档对 Masonry 的布局规则描述如下Masonry 维护一组宽度一致、高度各异的内容块内容按行排布当某一行的列数达到columns指定的数量后下一个元素会进入新的一行并加入当前最短的列以优化空间利用Masonry是一个容器可以接收任意元素作为子项。这条“总是加入最短列”的规则是后面验证布局是否符合预期的依据如果某个元素没有落到当前最短的列说明组件没有正确工作或被外部样式干扰了。准备依赖官方示例代码中的导入方式是import Masonry from mui/lab/Masonry; import Box from mui/material/Box; import Paper from mui/material/Paper; import { styled } from mui/material/styles;即项目需要依赖mui/labMasonry 所在包与mui/materialBox、Paper 等示例中使用的基础组件。请确认你的package.json中已包含这两个包后再开始下面的步骤。搭建基础瀑布流对应官方示例 BasicMasonry.tsximport Box from mui/material/Box; import { styled } from mui/material/styles; import Paper from mui/material/Paper; import Masonry from mui/lab/Masonry; const heights [150, 30, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 30, 50, 80]; const Item styled(Paper)(({ theme }) ({ backgroundColor: #fff, ...theme.typography.body2, padding: theme.spacing(0.5), textAlign: center, color: (theme.vars || theme).palette.text.secondary, ...theme.applyStyles(dark, { backgroundColor: #1A2027, }), })); export default function BasicMasonry() { return ( Box sx{{ width: 500, minHeight: 393 }} Masonry columns{4} spacing{2} {heights.map((height, index) ( Item key{index} sx{{ height }} {index 1} /Item ))} /Masonry /Box ); }关键配置columns{4}固定为 4 列spacing{2}元素之间的间距。注意文档明确指出传给spacing的值会乘以主题中的 spacing 字段即theme.spacing(2)而不是 2 像素子项通过sx{{ height }}给定不同高度模拟真实业务中高度不一的卡片。验证方式渲染后每一行应恰好容纳 4 个等宽项项高各不同第 5 个及之后的项应出现在当前最短的列的下方。heights数组中的具体数值是文档示例数据你可以替换为自己的内容验证时以“列宽一致 新项加入最短列”为准。让列数和间距支持响应式这是标题中“响应式”的核心部分。文档确认columns和spacing都接受以断点为键的响应式对象。对应 ResponsiveColumns.tsxMasonry columns{{ xs: 3, sm: 4 }} spacing{2} {heights.map((height, index) ( Item key{index} sx{{ height }} {index 1} /Item ))} /Masonry在小屏幕xs断点下显示 3 列sm断点及以上显示 4 列其余代码与基础示例相同。对应 ResponsiveSpacing.tsxMasonry columns{3} spacing{{ xs: 1, sm: 2, md: 3 }} {heights.map((height, index) ( Item key{index} sx{{ height }} {index 1} /Item ))} /Masonry列数固定为 3但间距随断点变化xs下为theme.spacing(1)sm下为theme.spacing(2)md下为theme.spacing(3)。验证方式拖动浏览器窗口跨越sm、md断点观察列数或间距是否按上面配置切换。官方文档中这两个示例均带有可交互演示见 masonry.md 的 Columns 与 Spacing 两节。可选改为从左到右的顺序排布默认情况下 Masonry 始终把新元素加入最短列。如果业务上要求元素严格按书写顺序从左到右排布可以给Masonry增加sequential属性。官方文档说明启用sequential后“items are added in order from left to right rather than adding to the shortest column”。对应 Sequential.tsxMasonry columns{4} spacing{2} defaultHeight{450} defaultColumns{4} defaultSpacing{1} sequential {heights.map((height, index) ( Item key{index} sx{{ height }} {index 1} /Item ))} /Masonry注意此示例同时设置了defaultHeight、defaultColumns、defaultSpacingSSR 相关下一节解释如果不需要 SSR 支持只保留columns、spacing、sequential即可。SSR 场景defaultHeight / defaultColumns / defaultSpacing在水滴流这种依赖实际渲染高度计算位置的布局里服务端渲染阶段拿不到元素真实高度。官方文档的 “Server-side rendering” 一节给出了对策使用defaultHeight、defaultColumns和defaultSpacing这三个属性来支持 SSR。对应 SSRMasonry.tsxBox sx{{ width: 500, minHeight: 393 }} Masonry columns{4} spacing{2} defaultHeight{450} defaultColumns{4} defaultSpacing{1} {heights.map((height, index) ( Item key{index} sx{{ height }} {index 1} /Item ))} /Masonry /Box三个属性各自的作用结合文档与源码 Masonry.js 可以明确defaultColumnsSSR 阶段按此列数把容器分成等宽列源码中据此计算每列宽度和行分组同时它是触发 SSR 模式的判断条件之一defaultHeightSSR 阶段容器的占位高度。文档明确要求defaultHeight应大到足以渲染所有行defaultSpacingSSR 阶段参与列间距计算的间距值。源码中与spacing一样会先经过theme.spacing换算parseToNumber(theme.spacing(ownerState.defaultSpacing))。源码中的判断逻辑是只有当defaultHeight、defaultColumns、defaultSpacing三者都提供时组件才按 SSR 样式渲染见 Masonry.js 中isSSR的判定只设置其中一两个不会启用 SSR 样式。SSR 场景的验证与限制均来自官方文档服务端渲染的 HTML 中子项按defaultColumns列均分容器高度为defaultHeight文档明确说明在服务端渲染的情况下元素不会被加入最短列——这是 SSR 结果与客户端布局的主要差异首屏可能出现“客户端水合后布局再次调整”的现象属于预期行为若defaultHeight给得不够大不足以容纳所有行属于配置错误需要调大该值。defaultHeight{450}等具体数值是文档示例的取值实际项目应根据自己的行数与列数重新估算保证“足够渲染所有行”。参考的官方示例与文档位置内容路径Masonry 文档含全部示例入口docs/data/material/components/masonry/masonry.md基础瀑布流docs/data/material/components/masonry/BasicMasonry.tsx响应式列数docs/data/material/components/masonry/ResponsiveColumns.tsx响应式间距docs/data/material/components/masonry/ResponsiveSpacing.tsx变高子项如 Accordiondocs/data/material/components/masonry/MasonryWithVariableHeightItems.tsx顺序排布docs/data/material/components/masonry/Sequential.tsxSSR 示例docs/data/material/components/masonry/SSRMasonry.tsx组件源码packages/mui-lab/src/Masonry/Masonry.js两点边界补充文档中的 Image masonry 示例展示了用 Masonry 排布图片其中图片按行排序如果你的场景要求图片按列排序文档建议改用 ImageList 组件的 masonry 模式参见 docs/data/material/components/image-list/image-list.md。变高内容的另一种形态子项不是固定像素高度而是可展开/折叠的组件如 Accordion时可直接作为 Masonry 子项Masonry 会依据实际高度在列间移动它们见 MasonryWithVariableHeightItems.tsx无需额外配置。【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考