Masonry 初始化失败主因是 DOM 状态未就绪：需确保元素已挂载、未隐藏、有明确宽度；columnWidth 推荐用选择器（如 '.grid-sizer'）而非固定像素值；图片加载需启用 imagesLoaded；动态添加元素必须调用 append 或 layout 方法。
直接用 Masonry 初始化失败？检查这三点
绝大多数初始化失败不是代码写错，而是 DOM 状态没准备好。常见现象是元素堆成一列、高度塌陷、或报错 Cannot read property 'offsetWidth' of null。
必须确保：
-
document.querySelector('.grid')能取到真实 DOM 节点（不能在DOMContentLoaded之前执行） - 容器和所有
.grid-item已插入文档，且未被display: none或visibility: hidden隐藏 - 每个
.grid-item有明确宽度（如width: 200px或通过父容器继承），否则 Masonry 无法计算列宽
columnWidth 设成选择器还是数值？区别在哪
columnWidth 决定 Masonry 如何划分“列基准”，它不等于最终列宽，而是布局算法的参考单位。设成选择器（如 '.grid-sizer'）比固定数值更健壮，尤其在响应式场景下。
推荐做法：
立即学习“前端免费学习笔记（深入）”；
- 在
.grid内放一个隐藏的.grid-sizer元素，用 CSS 控制其宽度（例如width: 25%或min-width: 300px） - 配置时传入
columnWidth: '.grid-sizer'，Masonry 会读取该元素的offsetWidth作为基准 - 避免用像素值（如
columnWidth: 300），否则窗口缩放或换设备时列数不会自动调整
图片加载后布局错乱？别跳过 imagesLoaded
Masonry 默认不等图片加载完就计算位置，导致 img 高度为 0，后续重绘又触发二次布局，卡顿且错位。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
正确处理方式：
- 显式启用
imagesLoaded: true（v4.2+ 默认开启，但老项目常关着） - 确保
img有src属性（哪怕占位图），空src或懒加载未触发会导致跳过检测 - 若用
loading="lazy"，需监听load事件后手动调用msnry.layout()
示例片段：
var msnry = new Masonry('.grid', { itemSelector: '.grid-item', columnWidth: '.grid-sizer', imagesLoaded: true });
动态添加元素后不重排？记住 append 和 layout
直接往 .grid 里 appendChild 新节点，Masonry 完全无感。必须用它的 API 告知变化。
关键操作只有两个：
- 新增一批元素：用
msnry.append( elementArray )，它会自动布局新项并保持原有顺序 - 只刷新全部：用
msnry.layout()，但性能差，仅用于调试或小数据量 - 删掉某几个？先用
msnry.remove( elementArray )，再调msnry.layout()
漏掉 append 直接插 DOM，是瀑布流“新加内容不进列”的最常见原因。
真正麻烦的不是初始化，而是图片尺寸异步到达、容器宽度响应式变化、以及 DOM 动态增删这三者的组合。任何一环没对齐，Masonry 就会“假装看不见”。
