Foundation Equalizer 均衡器

前言

• Foundation Equalizer 均衡器。

1、均衡器

• 可以在容器元素添加 data-equalizer 属性，并为每个子元素添加 data-equalizer-watch 属性来创建一个相同高度的均衡器。最高的元素决定了其他元素的高度。

• 均衡器需要使用 JavaScript。所以需要初始化 Foundation JS:

• 实例

  <div class="row" data-equalizer>
      <p>相等高度容器:</p>
      <div class="medium-4 columns panel" data-equalizer-watch>
          <p>Qian Chia 工作室 -- 学的不仅是技术，更是梦想！！！</p>
          <p>Qian Chia 工作室 -- 学的不仅是技术，更是梦想！！！</p>
          <p><strong>我是最高的元素。其他元素使用我的高度。</strong></p>
      </div>
      <div class="medium-4 columns panel" data-equalizer-watch>
          <p>Qian Chia 工作室 -- 学的不仅是技术，更是梦想！！！</p>
          <p>Qian Chia 工作室 -- 学的不仅是技术，更是梦想！！！</p>
      </div>
      <div class="medium-4 columns panel" data-equalizer-watch>
          <p>Qian Chia 工作室 -- 学的不仅是技术，更是梦想！！！</p>
      </div>
  </div>
  
  <!-- 初始化 Foundation JS -->
  <script>
       $(document).ready(function () {
          $(document).foundation();
       })
  </script>

• 效果 🔗

  

2、不同屏幕的均衡器

• 在均衡器上通过添加 data-equalizer-mq="value" 属性为不同屏幕尺寸设置相同高度。值可以是以下之一：

值	描述	备注	🔗
medium-up	默认。创建相同高度的容器，宽度大于 40.063em
large-up	创建相同高度的容器，宽度大于 64.063em		🔗
xlarge-up	创建相同高度的容器，宽度大于 90.063em		🔗
xxlarge-up	创建相同高度的容器，宽度大于 120.063em		🔗

• 实例

  <div class="row" data-equalizer data-equalizer-mq="large-up">
      <div class="medium-4 columns panel" data-equalizer-watch>
          <p>Qian Chia 工作室 -- 学的不仅是技术，更是梦想！！！</p>
          <p>Qian Chia 工作室 -- 学的不仅是技术，更是梦想！！！</p>
          <p><strong>我是最高的元素。其他元素使用我的高度。</strong></p>
      </div>
      <div class="medium-4 columns panel" data-equalizer-watch>
          <p>Qian Chia 工作室 -- 学的不仅是技术，更是梦想！！！</p>
          <p>Qian Chia 工作室 -- 学的不仅是技术，更是梦想！！！</p>
      </div>
      <div class="medium-4 columns panel" data-equalizer-watch>
          <p>Qian Chia 工作室 -- 学的不仅是技术，更是梦想！！！</p>
      </div>
  </div>
  
  <!-- 初始化 Foundation JS -->
  <script>
       $(document).ready(function () {
          $(document).foundation();
       })
  </script>

• 效果

    

3、嵌套内容

• 为 data-equalizer 和 data-equalizer-watch 属性添加相同的值。这会一起连接到均衡器容器。重复多次嵌套均衡器，确保他们是匹配的：

• 实例

  <div class="row" data-equalizer="first">
      <div class="medium-4 columns">
          <div class="panel" data-equalizer-watch="first">
              <h3>面板</h3>
              <div class="row" data-equalizer="second">
                  <div class="panel" data-equalizer-watch="second">
                      <h3>内嵌面板</h3>
                      <p>Qian Chia 工作室 -- 学的不仅是技术，更是梦想！！！</p>
                  </div>
                  <div class="panel" data-equalizer-watch="second">
                      <h3>内嵌面板</h3>
                      <p>Qian Chia 工作室 -- 学的不仅是技术，更是梦想！！！</p>
                  </div>
                  <div class="panel" data-equalizer-watch="second">
                      <h3>内嵌面板</h3>
                      <p>Qian Chia 工作室 -- 学的不仅是技术，更是梦想！！！</p>
                  </div>
              </div>
          </div>
      </div>
      <div class="medium-4 columns">
          <div class="panel" data-equalizer-watch="first">
              <h3>面板</h3>
              <p>Qian Chia 工作室 -- 学的不仅是技术，更是梦想！！！</p>
              <p>Qian Chia 工作室 -- 学的不仅是技术，更是梦想！！！</p>
          </div>
      </div>
      <div class="medium-4 columns">
          <div class="panel" data-equalizer-watch="first">
              <h3>面板</h3>
              <p>Qian Chia 工作室 -- 学的不仅是技术，更是梦想！！！</p>
          </div>
      </div>
  </div>
  
  <!-- 初始化 Foundation JS -->
  <script>
       $(document).ready(function () {
          $(document).foundation();
       })
  </script>

• 效果 🔗