瀑布流闪烁的根本原因是图片加载前高度为0导致布局重排，解决方法是提前声明占位空间：服务端写死宽高、客户端预读尺寸、css强制aspect-ratio、设置grid-auto-rows基准值、避免lazy loading首屏图，并用getboundingclientrect确保定位后再加载图片。

图片没设宽高时瀑布流必然闪烁

慢速网络下最典型的闪烁，不是字体跳变，而是图片加载前高度为 0、加载后突然撑开导致整列内容上移或错位。浏览器根本不知道这张图该占多高，grid-auto-flow 或 column-count 都会按“空盒子”切分，等图片回来再重排——这就是视觉抖动的根源。

解决路径只有一条：在 DOM 渲染前就告诉浏览器“这个位置必须预留多少空间”。不能靠 JS 算、不能等 onload、更不能指望 loading="lazy" 自己扛。

• 服务端渲染时直接写死 <img src="x.jpg" style="max-width:90%" style="max-width:90%"> —— Chrome/Firefox 会据此推导 aspect-ratio，连 CSS 都不用写
• 客户端动态生成时，先用 URL.createObjectURL() 或 new Image().src = url 预读尺寸，再插入带 width/height 的 <img>
• 实在无法预知尺寸（比如 CMS 后台上传未存元信息），用 CSS aspect-ratio: 4/3 强制容器比例，再配 img { width: 100%; height: 100%; object-fit: cover; }
• 兼容 Safari 15.3 及更早？别用伪元素 padding-bottom 技巧——它依赖父容器 position: relative，而瀑布流容器常是 display: grid 或 columns，会失效；改用包裹一层 <div class="img-wrapper"> 并设 <code>aspect-ratio

  column-count 在慢网下闪跳的根本原因

  column-count 不是布局算法，它只是把内容当纯文本流垂直切片。图片加载慢 → 高度为 0 → 后续内容提前“掉”进下一列 → 图片回来 → 整列重排 → 肉眼可见跳动。这不是 bug，是设计使然。

  想让它不闪，光加 break-inside: avoid 不够，必须让每一列的“起始高度可预测”。

  

  Doc To HTML

  使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

  下载
  • 所有 .item 必须有明确的最小高度（哪怕只是 min-height: 200px），防止塌陷
  • column-gap 必须用固定值（如 1rem），禁用百分比（如 5%）——否则 resize 或字体加载完成时会触发额外 layout
  • 不要给 .item 设 margin 控制间距，用 column-gap；margin 会被算进列宽，导致列数意外减少
  • 首屏图片绝对不要用 loading="lazy"，它会让占位时机进一步延后，放大闪烁风险

  Grid 瀑布流中 grid-auto-rows 的真实作用

  很多人以为 grid-auto-rows: 10px 是设 item 最小高度，其实它只是给 Grid 容器一个“行高基准”，让 grid-auto-flow: dense 知道怎么分配跨行空间。值本身无关紧要，但缺了它，高度不一的 item 就没法自动撑开对应行数。

  慢网下这个值还承担着“占位锚点”的隐性任务：只要容器有明确的行高基准，浏览器就能在图片加载前预留出大致空间，减少重排幅度。

  • 设成 grid-auto-rows: 1fr 没用——它只对显式定义的行有效，对 auto-flow 不生效
  • 设成 grid-auto-rows: 0 也不行——Grid 会拒绝生成行，item 全挤第一行
  • 推荐值：10px～50px 之间任选，配合 gap 使用；太大会浪费空白，太小可能导致短 item 被压缩
  • 如果 item 内部有文字，记得加 line-height 约束基线，否则字体加载延迟也会引发微抖

  IntersectionObserver 懒加载必须配合 getBoundingClientRect

  在瀑布流里用 IntersectionObserver 加载图片时，如果一进入视口就立刻赋值 src，浏览器还没来得及计算这张图该落在哪一列，就会先塞进第一列、再跳到目标列——这就是“先挤后跳”的典型闪烁。

  真正可靠的时机，不是“是否可见”，而是“是否已知位置”。

  • 在 observer 回调里，先调 element.getBoundingClientRect()，确认元素已在文档流中定位完毕，再设置 img.src
  • 或者用 requestIdleCallback 延迟赋值，避开渲染关键帧
  • 千万别在 scroll 事件里手动触发 masonry.layout() 或强制 getComputedStyle——这会直接触发 layout thrashing
  • 如果用了 masonry-layout 库，初始化前确保所有首屏图片已加载（可用 img.onload 聚合），否则列高计算全错
  慢网下的预留不是靠“等”，而是靠“提前声明”。宽高属性、aspect-ratio、grid-auto-rows 这些看似静态的配置，才是对抗闪烁的第一道防线。JS 只负责补漏，不该承担占位主责。