jquery等高需要使用浏览器调整大小

Question

我有4个h2标题，我使用jQuery来检测最大的标题，然后使其他h2的高度相同。

但是我遇到的问题是，当你将浏览器拖出来时，我正试图调整高度。目前，您必须更改浏览器的宽度，然后刷新页面以确定新的高度。

我很确定我需要使用resize()，但我很难让它正常工作。

代码如下：

$(document).ready(function() {

var elementHeights = $('.js-eq-height').map(function() {
  return $(this).height();
}).get();
var maxHeight = Math.max.apply(null, elementHeights);
$('.js-eq-height').height(maxHeight);

});

.item {
  background:red;
  width:25%;
  float:left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
  <h2 class="js-eq-height">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In commodo laoreet ipsum in ultricies. Vestibulum neque velit, dictum vitae ornare a, imperdiet in nibh.
    </h2>
    <p>
    Aliquam pretium ipsum et enim efficitur venenatis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tristique erat a massa blandit, vitae iaculis est lacinia. Phasellus vitae convallis ex, eu cursus augue. Aenean rutrum pharetra ex. Praesent id massa urna. Mauris sollicitudin libero eget luctus molestie. 
    </p>
  </div>
  <div class="item">
    <h2 class="js-eq-height">
      Lorem ipsum dolor sit amet, con
    </h2>
    <p>
    Aliquam pretium ipsum et enim efficitur venenatis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tristique erat a massa blandit, vitae iaculis est lacinia. Phasellus vitae convallis ex, eu cursus augue. Aenean rutrum pharetra ex. Praesent id massa urna. Mauris sollicitudin libero eget luctus molestie. 
    </p>
  </div>
  <div class="item ">
    <h2 class="js-eq-height">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In commodo laoreet.
    </h2>
    <p>
    Aliquam pretium ipsum et enim efficitur venenatis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tristique erat a massa blandit, vitae iaculis est lacinia. Phasellus vitae convallis ex, eu cursus augue. Aenean rutrum pharetra ex. Praesent id massa urna. Mauris sollicitudin libero eget luctus molestie. 
    </p>
  </div>
  <div class="item">
    <h2 class="js-eq-height">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </h2>
    <p>
    Aliquam pretium ipsum et enim efficitur venenatis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tristique erat a massa blandit, vitae iaculis est lacinia. Phasellus vitae convallis ex, eu cursus augue. Aenean rutrum pharetra ex. Praesent id massa urna. Mauris sollicitudin libero eget luctus molestie. 
    </p>
</div>

Answer 1

在resize事件中将height设置为auto并计算元素的最大高度，并将该高度设置为具有类.js-eq-height的所有元素。

一个样品

$(document).ready(function() {

  var resizeTimer;

  $(window).on('resize', function(e) {

    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() { 
    
        $('.js-eq-height').height('auto');
        var elementHeights = $('.js-eq-height').map(function() {
          return $(this).height();
        }).get();

        var maxHeight = Math.max.apply(null, elementHeights);
        $('.js-eq-height').height(maxHeight); 

    }, 250);

  }).trigger('resize'); 
});

.item { 
  width:25%;
  float:left;
  border:1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
  <h2 class="js-eq-height">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In commodo laoreet ipsum in ultricies. Vestibulum neque velit, dictum vitae ornare a, imperdiet in nibh.
  </h2>
  <p>
  Aliquam pretium ipsum et enim efficitur venenatis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tristique erat a massa blandit, vitae iaculis est lacinia. Phasellus vitae convallis ex, eu cursus augue. Aenean rutrum pharetra ex. Praesent id massa urna. Mauris sollicitudin libero eget luctus molestie. 
  </p>
</div>
<div class="item">
  <h2 class="js-eq-height">
    Lorem ipsum dolor sit amet, con
  </h2>
  <p>
  Aliquam pretium ipsum et enim efficitur venenatis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tristique erat a massa blandit, vitae iaculis est lacinia. Phasellus vitae convallis ex, eu cursus augue. Aenean rutrum pharetra ex. Praesent id massa urna. Mauris sollicitudin libero eget luctus molestie. 
  </p>
</div>
<div class="item ">
  <h2 class="js-eq-height">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In commodo laoreet.
  </h2>
  <p>
  Aliquam pretium ipsum et enim efficitur venenatis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tristique erat a massa blandit, vitae iaculis est lacinia. Phasellus vitae convallis ex, eu cursus augue. Aenean rutrum pharetra ex. Praesent id massa urna. Mauris sollicitudin libero eget luctus molestie. 
  </p>
</div>
<div class="item">
  <h2 class="js-eq-height">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </h2>
  <p>
  Aliquam pretium ipsum et enim efficitur venenatis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tristique erat a massa blandit, vitae iaculis est lacinia. Phasellus vitae convallis ex, eu cursus augue. Aenean rutrum pharetra ex. Praesent id massa urna. Mauris sollicitudin libero eget luctus molestie. 
  </p>
</div>