均衡器

JavaScript

均衡器可以轻松地使多个项目的高度相同。

基础知识

要设置均衡器组，您需要一个容器，该容器具有属性 data-equalizer，然后是一系列子元素，这些子元素具有属性 data-equalizer-watch。所有子元素都将调整为具有相同的高度。

<div class="grid-x grid-margin-x" data-equalizer data-equalize-on="medium" id="test-eq">
  <div class="cell medium-4">
    <div class="callout" data-equalizer-watch>
      <img src= "assets/img/generic/square-1.jpg">
    </div>
  </div>
  <div class="cell medium-4">
    <div class="callout" data-equalizer-watch>
      <p>Pellentesque habitant morbi tristique senectus et netus et, ante.</p>
    </div>
  </div>
  <div class="cell medium-4">
    <div class="callout" data-equalizer-watch>
      <img src= "assets/img/generic/rectangle-1.jpg">
    </div>
  </div>
</div>

Pellentesque habitant morbi tristique senectus et netus et, ante.

嵌套

要在另一个均衡器中使用一个均衡器，每个容器都需要一个唯一的 ID，并使用 data-equalizer 属性分配。然后，每个 data-equalizer-watch 元素都应具有与其父元素匹配的值。

在下面的示例中，第一组均衡器元素的值为 foo，而内部元素的值为 bar。在实际示例中，我们还为父元素设置了 equalizeOn 选项为“medium”，并且第一个 div 中包含的子均衡器在堆叠时均衡，并保持相同的高度。

<div class="grid-x" data-equalizer="foo">
  <div class="cell medium-4" data-equalizer-watch="foo">
    <div class="callout" data-equalizer-watch="foo" data-equalizer="bar">
      <h3>Parent panel</h3>
      <div class="callout" data-equalizer-watch="bar"></div>
      <div class="callout" data-equalizer-watch="bar"></div>
      <div class="callout" data-equalizer-watch="bar"></div>
    </div>
  </div>
  <div class="cell medium-4">
    <div class="callout panel" data-equalizer-watch="foo"></div>
  </div>
  <div class="cell medium-4">
    <div class="callout" data-equalizer-watch="foo"></div>
  </div>
</div>

父面板

此面板中的三个标注将均衡，即使堆叠时也是如此。

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

这些面板在堆叠时不会均衡，而是在中等大小及以上时均衡。

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

按行均衡

如果您有一个包含多次换行的项目库，则可以将均衡器配置为匹配每行项目的高度。与块网格配合使用效果很好！

在视频中观看此部分

幕后原理

均衡器通过检查 data-equalizer-watch 元素的垂直偏移量并将具有相同偏移量的元素分组为“行”来将它们分成几组。

请注意您设置 data-equalizer-watch 的内容，如果顶部位置不同，均衡器会将其解释为新“行”并进行相应均衡。

<div class="grid-x grid-padding-x small-up-1 medium-up-2 large-up-4" data-equalizer data-equalize-by-row="true">
  <div class="cell" data-equalizer-watch></div>
  <div class="cell" data-equalizer-watch></div>
  <div class="cell" data-equalizer-watch></div>
  <!-- ... -->
</div>

Lorem ipsum dolor sit amet

JavaScript 参考

初始化

要使用此插件，您的 JavaScript 中必须包含以下文件

foundation.core.js
foundation.equalizer.js
- 使用实用程序库 foundation.util.mediaQuery.js
- 使用实用程序库 foundation.util.imageLoader.js

Foundation.Equalizer

创建一个 Equalizer 的新实例。

var elem = new Foundation.Equalizer(element, options);

触发以下事件： Equalizer#event:init

名称	类型	描述
`element`	对象	要向其添加触发器的 jQuery 对象。
`options`	对象	覆盖默认插件设置。

插件选项

使用这些选项来自定义均衡器的实例。插件选项可以设置为单独的数据属性，一个组合的 data-options 属性，或作为传递给插件构造函数的对象。详细了解如何初始化 JavaScript 插件。

名称	类型	默认	描述
`data-equalize-on-stack`	`布尔值`	`false`	在较小的屏幕上堆叠时启用高度均衡。
`data-equalize-by-row`	`布尔值`	`false`	逐行启用高度均衡。
`data-equalize-on`	`字符串`	`''`	表示插件应在其上均衡高度的最小断点大小的字符串。

事件

这些事件将从附加了均衡器插件的任何元素触发。

名称	描述
`preequalized.zf.equalizer`	在应用高度之前触发
`postequalized.zf.equalizer`	在应用高度后触发
`preequalizedrow.zf.equalizer`	在应用每行的高度之前触发
`postequalizedrow.zf.equalizer`	在应用每行的高度后触发

方法

getHeights

$('#element').foundation('getHeights', cb);

查找均衡器父元素中包含的子元素的外部高度，并将其返回到数组中

名称	类型	描述
`cb`	函数	将高度数组返回到的非可选回调。

getHeightsByRow

$('#element').foundation('getHeightsByRow', cb);

查找均衡器父元素中包含的子元素的外部高度，并将其返回到数组中

名称	类型	描述
`cb`	函数	将高度数组返回到的非可选回调。

applyHeight

$('#element').foundation('applyHeight', heights);

更改均衡器父元素中每个子元素的 CSS height 属性以匹配最高的高度

触发以下事件： Equalizer#event:preequalized Equalizer#event:postequalized

名称	类型	描述
`heights`	数组	均衡器容器中子元素的高度数组

applyHeightByRow

$('#element').foundation('applyHeightByRow', groups);

更改均衡器父元素中每个子元素的 CSS height 属性以逐行匹配最高的高度

触发以下事件： Equalizer#event:preequalized Equalizer#event:preequalizedrow Equalizer#event:postequalizedrow Equalizer#event:postequalized

名称	类型	描述
`groups`	数组	均衡器容器中子元素的高度数组，按行分组，元素、高度和最大值作为最后一个子元素

_destroy

$('#element').foundation('_destroy');

销毁均衡器的实例。