Question

是否可以在一个容器中初始化多个Equalizers？

<div class="row props-set" >
  <div class="small-12 columns text-center" data-equalizer="header"  data-equalizer="paragraph" data-equalizer="image" data-equalize-on="medium">
    <div class="props-box">
        <div class="image" data-equalizer-watch="image"><img src="assets/img/props1.png" alt=""></div>
        <h3 data-equalizer-watch="header">Lorem ipsum dolor sit.</h3>
        <p data-equalizer-watch="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, iste!</p>
    </div>
    <div class="props-box">
        <div class="image" data-equalizer-watch="image"><img src="assets/img/props2.png" alt=""></div>
        <h3 data-equalizer-watch="header">Dolores, dolorum omnis ex.</h3>
        <p data-equalizer-watch="paragraph">Sint natus nam blanditiis temporibus labore, tempore consectetur beatae dolores.</p>
    </div>
    <div class="props-box">
        <div class="image" data-equalizer-watch="image"><img src="assets/img/props3.png" alt=""></div>
        <h3 data-equalizer-watch="header">Odit quasi ipsa, mollitia.</h3>
        <p data-equalizer-watch="paragraph">Libero quis omnis, beatae unde expedita nostrum quidem non necessitatibus!</p>
    </div>
  </div>
</div>

当我将data-equalizer的初始化划分为单独的div时，一切正常。

<div class="row props-set"  data-equalizer="image" data-equalize-on="medium">
   <div class="dummy-div" data-equalizer="paragraph" data-equalize-on="medium"> 
      <div class="small-12 columns text-center" data-equalizer="header" data-equalize-on="medium">

Answer 1

无法在一个容器中初始化多个均衡器。最快的解决方案是在.row.props-set之前添加另一个行容器，并在其上放置data-equalizer =“header”。（Foundation）

我个人更喜欢用自定义脚本解决这个问题：

HTML：

<div class="row" data-equal="ONE,TWO">
    <div class="medium-4">
        <div class="top" data-equal-watch="ONE"></div>
        <div class="bottom" data-equal-watch="TWO"></div>
    </div>
    <div class="medium-4">
        <div class="top" data-equal-watch="ONE"></div>
        <div class="bottom" data-equal-watch="TWO"></div>
    </div>
    <div class="medium-4">
        <div class="top" data-equal-watch="ONE"></div>
        <div class="bottom" data-equal-watch="TWO"></div>
    </div>
</div>

脚本：

function Equal(){
    $("[data-equal]").each(function(){
        var parent = $(this);
        var type = parent.attr('data-equal');
        var array = type.split(",");

        $.each(array,function(i,e){
            var H = 0;
            parent.find( "[data-equal-watch="+e+"]" ).each(function(){
                var h = $(this).height();
                if( h > H ){ H = h; }
            });
            console.log(H);
            $("[data-equal-watch="+e+"]").height(H);
        });
    });
}

一个容器中有多个均衡器

1 个答案: