当前位置：首页 > news >正文

Foundation 均衡器(Equalizer)

news 2026/6/14 11:59:48

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>