javascript - 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 事件中将高度设置为自动并计算元素的最大高度并将该高度设置为具有类 .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>