Foundation CSS Equalizer 按行均衡

介绍

Equalizer是Zurb Foundation框架中的一个组件，它可以轻松实现按行均衡的效果。当你在页面上使用Equalizer时，它会通过调整元素的高度，使它们在同一行中保持相同的高度。

安装

Foundation是一个基于Sass和jQuery构建的前端框架。如果你已经安装了Foundation，你就可以直接使用Equalizer。如果没有安装Foundation，你需要先安装Foundation。你可以通过npm进行安装，也可以下载压缩包手动安装。

# 通过npm安装
npm install foundation-sites --save-dev

<!-- 通过cdn引入 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.3/foundation.min.css">
<script src="https://cdn.jsdelivr.net/foundation/6.2.3/foundation.min.js"></script>

使用

在你的HTML中加入data-equalizer属性和data-equalize-on属性，使用data-equalize-on属性来指定何时启用Equalizer效果。通常是在不同的Breakpoint上使用，比如：medium、large等。

<div class="row" data-equalizer data-equalize-on="medium">
  <div class="column medium-6" data-equalizer-watch>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="column medium-6" data-equalizer-watch>
    <p>Suspendisse potenti. Aliquam erat volutpat.</p>
    <p>Integer sit amet semper lacus. Proin mattis efficitur urna vel gravida.</p>
  </div>
</div>

在上面的代码中，我们把两列放在行内，并设置相同的高度。其中，.row表示行，data-equalizer表示启用Equalizer效果，data-equalize-on="medium"表示在中等屏幕上启用Equalizer效果，.medium-6表示在中等屏幕上，每列占6列宽度，data-equalizer-watch表示当前元素需要参与Equalizer效果。

参数

在使用Equalizer时，还可以使用一些参数来控制Equalizer的行为。

[data-equalizer]

| 属性 | 类型 | 描述 | | --- | --- | --- | | data-equalizer | String | 启用Equalizer效果。| | data-equalize-by-row | String | 把元素按行均衡，而不是单个元素。默认情况下，Equalizer会对每个元素分别调整其高度，如果使用了data-equalize-by-row属性，Equalizer将把这些元素分为几行，再对每一行进行调整，使它们保持相同的高度。| | data-equalize-on | String | 设置在何种断点上启用Equalizer效果。可选值：small、medium、large、xlarge、xxlarge。默认是在所有断点上启用Equalizer效果。|

[data-equalizer-watch]

| 属性 | 类型 | 描述 | | --- | --- | --- | | data-equalizer-watch | String | 启用当前元素参与Equalizer效果。| | data-equalizer-mq | String | 在哪个断点里启用当前元素的Equalizer效果。可选值：small、medium、large、xlarge、xxlarge。默认是在所有断点上启用Equalizer效果。|

结语

使用Equalizer可以让你很方便的实现按行均衡的效果。如果你使用Foundation框架，Equalizer已经有了内置支持，可以直接使用。如果你没有使用Foundation框架，你也可以单独引入Equalizer的样式和脚本文件，来实现此功能。