图片加载错位的根本原因是高度为0，必须让布局引擎初始就知晓占位高度；使用aspect-ratio是最简解法，现代浏览器原生支持，比width/height更可靠；降级可用padding-bottom包裹+绝对定位；column-count错位需确保.item为直系子元素并设break-inside: avoid；Grid瀑布流慎用grid-row-end，优先固定行高或后端传比例预计算；统一img{display:block}，骨架占位须保真高度，懒加载需组合IntersectionObserver与naturalWidth判断。
图片加载未完成时的错位，根本原因是高度为 0 —— 浏览器没拿到尺寸就排版，后续撑开必然跳动。这不是“等 JS 补救”能解决的，必须让布局引擎从一开始就知道该占多高。
给 <img> 直接设 aspect-ratio 是最简解法
现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）原生支持 aspect-ratio，它比 width/height 属性更可靠，不受响应式缩放干扰。
-
<img src="a.jpg" style="aspect-ratio: 4/3; object-fit: cover;">—— 行内写死宽高比，加载前就预留空间 - 避免只写
width或height单值，否则在弹性容器里会失真 - 如果后端能返回宽高，优先用服务端注入：
<img data-aspect-ratio="1.5">，再由 JS 补 CSS，但不如原生aspect-ratio零延迟 - Safari 15.4 之前不支持？降级方案：用
padding-bottom: 66.67%包裹层 +position: relative+position: absolute子图
column-count 错位不是 bug，是设计使然
column-count 按文本流切片，不感知子元素高度。一张 500px 高的图，在加载前被算作 0px，结果整列被压缩到顶部，图一加载完立刻劈开、错行。
- 必须确保所有
.item是容器的**直系子元素**，break-inside: avoid才生效 -
<img>本身不响应break-inside，得包一层<div class="item"></div> - Firefox/Safari 下要加
-webkit-column-break-inside: avoid兼容 - 别指望它做“最短列优先”，这是伪瀑布流，仅适合等高卡片或图标网格
用 grid-auto-flow: dense 模拟瀑布流时，grid-row-end 要慎用
CSS Grid 配合 grid-auto-flow: dense 能填空，但前提是每张图有可预测高度。如果靠 JS 动态写 grid-row-end: span 2，容易因图片未加载导致 getBoundingClientRect().height 返回 0，反而让格子塌进第一行。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 优先用固定行高 +
minmax(280px, 1fr)列宽，比如grid-template-rows: repeat(auto-fill, 300px) - 若必须自适应，后端传比例字段（如
data-ratio="1.33"），JS 渲染前就计算grid-row-end值，而不是等load后再改 - 禁用
img { display: inline }，默认基线对齐会抬高行高，统一写img { display: block } - 别在 grid 容器上设
overflow: hidden，否则跨多行的图会被截断
懒加载触发重排的时机比你想的更关键
只监听 IntersectionObserver 不够——图可能已加载完但还没进视口，opacity 一开就跳；只监听 img.onload 也不行——滚动快时图还没进视口就加载了，动画提前，下方内容闪跳。
- 必须组合判断：
observer.isIntersecting && img.naturalWidth > 0，两者都满足才移除骨架、添加fade-in - 骨架占位不能只靠
opacity，得有真实高度：用padding-bottom或aspect-ratio确保容器高度不变 - 动态插入的图，要在
appendChild()完成后再交给observer.observe()，否则观察不到 - 容器自身带滚动（如
overflow-y: auto）？必须显式设root: containerEl，否则 IntersectionObserver 默认以 viewport 为根，计算失效
真正难的不是写 layout 逻辑，而是把“高度可预测”这件事贯穿到 HTML 结构、CSS 声明、JS 加载链路的每一环。任何一环漏掉，都会在慢网或低端设备上暴露抖动问题。
