Foundation 均衡器（Equalizer）详解（超级完整版，一次讲透）
我们继续你的 Foundation 系列，今天把 均衡器（Equalizer）讲得明明白白！这是 Foundation 6+ 中的一个实用插件，用于让一组元素（如卡片、列、面板）高度自动均衡（匹配最高的那一个），非常适合产品卡片、定价表、图库等场景，避免视觉参差不齐。支持响应式、嵌套、按行均衡（by row）等！
1. 基本结构（Foundation 6+ 标准写法）
<div class="grid-x grid-margin-x" data-equalizer="foo"> <!-- 父容器加 data-equalizer（可选 ID） -->
<div class="cell medium-4">
<div class="callout" data-equalizer-watch="foo"> <!-- 子元素加 watch -->
<h5>短内容卡片</h5>
<p>这里内容少。</p>
</div>
</div>
<div class="cell medium-4">
<div class="callout" data-equalizer-watch="foo">
<h5>长内容卡片</h5>
<p>这里内容超级多，超级多，超级多，超级多，超级多，超级多...</p>
</div>
</div>
<div class="cell medium-4">
<div class="callout" data-equalizer-watch="foo">
<h5>中等卡片</h5>
<p>中等长度内容。</p>
</div>
</div>
</div>- 父容器：
data-equalizer（可选加唯一值如 “foo” 用于嵌套） - 子元素：
data-equalizer-watch（值匹配父容器，用于嵌套）
2. 按行均衡（data-equalize-by-row，最实用！）
适合多行卡片（如图库），每行内高度匹配，而不是全局最高：
<div class="grid-x grid-margin-x small-up-2 medium-up-3" data-equalizer data-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');
});
// 或特定元素
var equalizer = new Foundation.Equalizer($('#myContainer'));
equalizer.reflow();5. 今天直接给你抄的完整代码（复制就能跑）
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/css/foundation.min.css">
</head>
<body>
<h3>Foundation Equalizer 均衡器全家福</h3>
<!-- 基本三列卡片均衡 -->
<div class="grid-x grid-margin-x" data-equalizer="cards">
<div class="cell medium-4">
<div class="callout" data-equalizer-watch="cards">
<h5>卡片 1</h5>
<p>短内容。</p>
<img src="https://via.placeholder.com/300x150">
</div>
</div>
<div class="cell medium-4">
<div class="callout" data-equalizer-watch="cards">
<h5>卡片 2（最长）</h5>
<p>超级长内容，超级长内容，超级长内容，超级长内容，超级长内容...</p>
<img src="https://via.placeholder.com/300x400">
</div>
</div>
<div class="cell medium-4">
<div class="callout" data-equalizer-watch="cards">
<h5>卡片 3</h5>
<p>中等内容。</p>
<img src="https://via.placeholder.com/300x200">
</div>
</div>
</div>
<!-- 按行均衡的多卡片 -->
<div class="grid-x grid-margin-x small-up-2 medium-up-4" data-equalizer data-equalize-by-row="true" style="margin-top:40px;">
<!-- 放 8 张不同高度卡片，观察每行独立均衡 -->
<div class="cell"><div class="callout" data-equalizer-watch><p>短</p></div></div>
<div class="cell"><div class="callout" data-equalizer-watch><p>超级长超级长超级长超级长</p></div></div>
<!-- 更多... -->
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="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”
“帮我做产品卡片”
“给我动态刷新代码”
我立刻给你写好！
