直接用 Masonry.js 会错位，因其初始化时不等待图片加载，按原始尺寸（如0px）布局导致塌陷；需用imagesLoaded确保图片加载完成后再初始化Masonry实例。
为什么直接用 Masonry.js 会错位？
因为 Masonry 初始化时默认不等图片加载完成，它按 <img> 标签的原始尺寸（比如宽高为 0 或 1px）计算位置，导致布局塌陷、重叠或错行。这不是 Masonry 的 bug，而是它本就不负责等待资源加载——得靠 imagesLoaded 补上这层依赖。
imagesLoaded 必须在 Masonry 初始化前绑定吗？
不是必须“前”，但必须在 Masonry 第一次布局前触发回调。常见错误是把 imagesLoaded 放在 new Masonry() 后面、又没等它完成就调用 layout()，结果还是错位。
正确做法是：
-
imagesLoaded包裹容器，等所有<img>的load和error事件都 settled 后，再初始化Masonry - 如果容器里有懒加载图片（
data-src），要先手动触发加载或改用imagesLoaded的background选项检测 CSS 背景图 - 避免对同一容器重复初始化
Masonry实例，否则会叠加事件监听器，引发多次重排
怎么写一个最小可用的 imagesLoaded + Masonry 配合代码？
假设你的 HTML 容器是 <div id="grid"></div>，每张图用 <div class="grid-item"><img src="..."></div> 包裹：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
document.addEventListener('DOMContentLoaded', function() {
const grid = document.querySelector('#grid');
<p>imagesLoaded(grid, { background: true }, function() {
new Masonry(grid, {
itemSelector: '.grid-item',
columnWidth: '.grid-item',
percentPosition: true,
gutter: 8
});
});
});注意点：
-
columnWidth: '.grid-item'表示按第一个.grid-item的宽度作为列宽基准，不是固定像素值；若想响应式，可配合 CSS 设置.grid-item的width（如width: calc(33.333% - 8px)） -
percentPosition: true是必须的，否则gutter在百分比列宽下会失效 - 如果图片带
loading="lazy"，需在imagesLoaded前手动触发加载，或移除该属性——imagesLoaded不监听loading属性延迟的加载
动态添加图片后怎么重新布局？
不能直接再调 new Masonry()，而要用已有实例的 append + layout 方法。前提是：你得把 Masonry 实例存为变量，且确保新插入的 .grid-item 已挂载到 DOM 中。
例如：
// 假设 msnry 是上面创建的 Masonry 实例
const newItem = document.createElement('div');
newItem.className = 'grid-item';
newItem.innerHTML = '<img src="new.jpg" />';
grid.appendChild(newItem);
<p>// 等新图加载完再布局
imagesLoaded(newItem, function() {
msnry.appended(newItem);
msnry.layout();
});容易漏的细节：
-
msnry.appended()只接受 DOM 元素或元素数组，不接受 HTML 字符串 - 如果新图是背景图，要传
{ background: true }给imagesLoaded的第二个参数 - 频繁增删时，建议用
msnry.reloadItems()替代反复append，再统一layout()
真正麻烦的从来不是写几行初始化代码，而是图片加载时机、懒加载干扰、CSS width 计算方式、以及 Masonry 实例生命周期管理——这些地方一松懈，瀑布流就塌成一片。
