微软自拍应用技术解析：计算机视觉如何实现智能美颜
2026/5/12 5:45:02
Foundation 均衡器（Equalizer）详解（超级完整版，一次讲透）
我们继续你的 Foundation 系列，今天把均衡器（Equalizer）讲得明明白白！这是 Foundation 6+ 中的一个实用插件，用于让一组元素（如卡片、列、面板）高度自动均衡（匹配最高的那一个），非常适合产品卡片、定价表、图库等场景，避免视觉参差不齐。支持响应式、嵌套、按行均衡（by row）等！
1. 基本结构（Foundation 6+ 标准写法）
<divclass="grid-x grid-margin-x"data-equalizer="foo"><!-- 父容器加><divclass="cell medium-4"><divclass="callout"data-equalizer-watch="foo"><!-- 子元素加 watch --><h5>短内容卡片</h5><p>这里内容少。</p></div></div><divclass="cell medium-4"><divclass="callout"data-equalizer-watch="foo"><h5>长内容卡片</h5><p>这里内容超级多，超级多，超级多，超级多，超级多，超级多...</p></div></div><divclass="cell medium-4"><divclass="callout"data-equalizer-watch="foo"><h5>中等卡片</h5><p>中等长度内容。</p></div></div></div>- 父容器：
data-equalizer（可选加唯一值如 “foo” 用于嵌套） - 子元素：
data-equalizer-watch（值匹配父容器，用于嵌套）
2. 按行均衡（data-equalize-by-row，最实用！）
适合多行卡片（如图库），每行内高度匹配，而不是全局最高：
<divclass="grid-x grid-margin-x small-up-2 medium-up-3"data-equalizerdata-equalize-by-row="true"><!-- 多张卡片，自动换行时每行独立均衡 --></div>3. 响应式控制
- 只在特定断点生效：
data-equalize-on="medium"（仅中屏以上均衡，小屏不均衡） - 栈式时均衡：
data-equalize-on-stack="true"（小屏垂直堆叠时仍均衡）
4. 动态刷新（图片加载/AJAX 后必用）
图片加载后高度变化，需要手动刷新：
$(window).on('load',function(){$(document).foundation('equalizer','reflow');});// 或特定元素varequalizer=newFoundation.Equalizer($('#myContainer'));equalizer.reflow();5. 今天直接给你抄的完整代码（复制就能跑）
<!DOCTYPEhtml><html><head><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/css/foundation.min.css"></head><body><h3>Foundation Equalizer 均衡器全家福</h3><!-- 基本三列卡片均衡 --><divclass="grid-x grid-margin-x"data-equalizer="cards"><divclass="cell medium-4"><divclass="callout"data-equalizer-watch="cards"><h5>卡片 1</h5><p>短内容。</p><imgsrc="https://via.placeholder.com/300x150"></div></div><divclass="cell medium-4"><divclass="callout"data-equalizer-watch="cards"><h5>卡片 2（最长）</h5><p>超级长内容，超级长内容，超级长内容，超级长内容，超级长内容...</p><imgsrc="https://via.placeholder.com/300x400"></div></div><divclass="cell medium-4"><divclass="callout"data-equalizer-watch="cards"><h5>卡片 3</h5><p>中等内容。</p><imgsrc="https://via.placeholder.com/300x200"></div></div></div><!-- 按行均衡的多卡片 --><divclass="grid-x grid-margin-x small-up-2 medium-up-4"data-equalizerdata-equalize-by-row="true"style="margin-top:40px;"><!-- 放 8 张不同高度卡片，观察每行独立均衡 --><divclass="cell"><divclass="callout"data-equalizer-watch><p>短</p></div></div><divclass="cell"><divclass="callout"data-equalizer-watch><p>超级长超级长超级长超级长</p></div></div><!-- 更多... --></div><scriptsrc="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/js/foundation.min.js"></script><script>$(document).foundation();</script></body></html>下面给你看真实效果（官方文档和项目中最标准的 Foundation Equalizer 示例）：
官方文档（最新版）：https://get.foundation/sites/docs/equalizer.html
你现在想干嘛？
→ 终于可以讲 Foundation 表格（Table）了？
→ 帮我做一个 4 列产品卡片均衡（带图片和不同描述长度）？
→ 给我一个动态加载内容后刷新 Equalizer 的代码？
直接回复下一句：
“明天讲 table”
“帮我做产品卡片”
“给我动态刷新代码”
我立刻给你写好！