jquery - 如何从卡片或类似的东西中获取标题以与 flexbox 具有相同的高度？

Question

请勿破解

没有硬编码。这个想法不是解决一个案例，例如对于有 4 列的情况，但针对动态内容和响应式屏幕尺寸解决了这个问题。

我的问题是它基本上不是直接的 child ，而是它的内容

代码笔在这里:

https://codepen.io/anon/pen/OxzrzV

HTML

<h1>disclaimer: resize the window. Make the blue headers in a row match height</h1>
<div class="row mycontainer">
  <div class="col-12 col-md-4 col-lg-3">
    <div class="item">
       <div class="header">bippo</div>
        <div class="content">some content lala some content lala </div>
    </div>
  </div>
    <div class="col-12 col-md-4 col-lg-3">
    <div class="item">
       <div class="header">bippo</div>
        <div class="content">some content lala </div>
    </div>
  </div>
    <div class="col-12 col-md-4 col-lg-3">
      <div class="item">
       <div class="header">bippo</div>
        <div class="content">some content lala </div>
      </div>
  </div>
  <div class="col-12 col-md-4 col-lg-3">
    <div class="item">
       <div class="header">bippo</div>
        <div class="content">some content lala </div>
    </div>
  </div>
    <div class="col-12 col-md-4 col-lg-3">
    <div class="item">
       <div class="header">bippo</div>
        <div class="content">some content lala some content lala some content lala </div>
    </div>
  </div>
    <div class="col-12 col-md-4 col-lg-3">
      <div class="item">
       <div class="header">oh no this header wraps</div>
        <div class="content">some content lala </div>
      </div>
  </div>
</div>

CSS

 body{
  padding: 20px;
}

.item{
  height: 100%;
  padding-right: 20px;
  padding-top: 20px;
  display: flex;
  flex-direction: column
}

.header{
  background-color: cornflowerblue;
}

.content{
  background-color: salmon;
  flex-grow: 1;
}

.mycontainer{
  max-width: 500px;
}

我想要什么？

蓝色标题始终与当前行中的所有元素具有相同的大小。

可靠的 jquery 解决方案也很好......但它必须是万无一失的，并且也可以调整大小。 html结构的一般变化也很好。但必须响应正确。

所以这个(通过硬编码实现而不是响应):

Answer 1

基本上有两种方法可以实现，CSS 方式，

• CSS - How to have children in different parents the same height?

还有脚本方式，这里使用jQuery。

---

第一个脚本示例展示了如何为所有元素设置相同的高度。

第二个示例将每行的高度设置为相等，实现该方法的方法是检查元素的最高值(它会随着新行的变化而变化)并为每个处理过的范围/行设置高度。

我还添加了一些优化，预加载元素，因此如果只有 1 个元素或列，它不会处理它们。

---

Updated codepen 1

堆栈片段 1

(function ($) {

  // preload object array to gain performance
  var $headers = $('.header')
  
  // run at resize
  $( window ).resize(function() {
    $.fn.setHeaderHeight(0);   
  });  

  $.fn.setHeaderHeight = function(height) {

    // reset to auto or else we can't check height
    $($headers).css({ 'height': 'auto' });
    
    // get highest value
    $($headers).each(function(i, obj) {    
      height = Math.max(height, $(obj).outerHeight()) 
    });

    // set the height
    $($headers).css({ 'height': height + 'px' });    
  }

  // run at load
  $.fn.setHeaderHeight(0);
  
}(jQuery));

body{
  padding: 20px;
}

.item{
  height: 100%;
  padding-right: 20px;
  padding-top: 20px;
  display: flex;
  flex-direction: column
}

.header{
  background-color: cornflowerblue;
}

.content{
  background-color: salmon;
  flex-grow: 1;
}

.mycontainer{
  max-width: 500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet"/>

<div class="row mycontainer">
  <div class="col-12 col-md-4 col-lg-3">
    <div class="item">
       <div class="header">bippo</div>
        <div class="content">some content lala some content lala </div>
    </div>
  </div>
    <div class="col-12 col-md-4 col-lg-3">
    <div class="item">
       <div class="header">bippo</div>
        <div class="content">some content lala </div>
    </div>
  </div>
    <div class="col-12 col-md-4 col-lg-3">
      <div class="item">
       <div class="header">bippo</div>
        <div class="content">some content lala </div>
      </div>
  </div>
  <div class="col-12 col-md-4 col-lg-3">
    <div class="item">
       <div class="header">bippo</div>
        <div class="content">some content lala </div>
    </div>
  </div>
    <div class="col-12 col-md-4 col-lg-3">
    <div class="item">
       <div class="header">bippo</div>
        <div class="content">some content lala some content lala some content lala </div>
    </div>
  </div>
    <div class="col-12 col-md-4 col-lg-3">
      <div class="item">
       <div class="header">oh no this header wraps</div>
        <div class="content">some content lala </div>
      </div>
  </div>
</div>

---

Updated codepen 2

堆栈片段 2

(function ($) {
  //  preload object array to gain performance
  var $headers = $('.header')

  // only do this if there is more than 1 item
  if ($headers.length < 2) { return; }
    
  //  run at resize
  $( window ).resize(function() {
    $.fn.setHeaderHeight(0,0);   
  });

  $.fn.setHeaderHeight = function(height, idx) {
    // reset to auto or else we can't check height
    $($headers).css({ 'height': 'auto' });
     
    $($headers).each(function(i, obj) {    

      // only continue if there is more than 1 column
      if ($($headers).eq(0).offset().top !== $($headers).eq(1).offset().top  ) {
        return false;
      }
      
      // get highest value
      height = Math.max(height, $(obj).outerHeight()) 
      
      // did top value changed or are we at last item
      if (i != 0 && $($headers).eq(i - 1).offset().top != $(obj).offset().top) {

        // set height for row
        $($headers).slice(idx, i).css({ 'height': height + 'px' });
        
        // reset height and startIndex
        height = 0;
        idx = i;
      } else if ($headers.length - 1 == i) {
        
        // last row
        $($headers).slice(idx, i + 1).css({ 'height': height + 'px' });   
      }

    });        
  }
  
  //  run at load
  $.fn.setHeaderHeight(0,0);

}(jQuery));

body{
  padding: 20px;
}

.item{
  height: 100%;
  padding-right: 20px;
  padding-top: 20px;
  display: flex;
  flex-direction: column
}

.header{
  background-color: cornflowerblue;
}

.content{
  background-color: salmon;
  flex-grow: 1;
}

.mycontainer{
  max-width: 500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet"/>

<div class="row mycontainer">
  <div class="col-12 col-md-4 col-lg-3">
    <div class="item">
       <div class="header">bippo</div>
        <div class="content">some content lala some content lala </div>
    </div>
  </div>
    <div class="col-12 col-md-4 col-lg-3">
    <div class="item">
       <div class="header">bippo</div>
        <div class="content">some content lala </div>
    </div>
  </div>
    <div class="col-12 col-md-4 col-lg-3">
      <div class="item">
       <div class="header">bippo</div>
        <div class="content">some content lala </div>
      </div>
  </div>
  <div class="col-12 col-md-4 col-lg-3">
    <div class="item">
       <div class="header">bippo</div>
        <div class="content">some content lala </div>
    </div>
  </div>
    <div class="col-12 col-md-4 col-lg-3">
    <div class="item">
       <div class="header">bippo</div>
        <div class="content">some content lala some content lala some content lala </div>
    </div>
  </div>
    <div class="col-12 col-md-4 col-lg-3">
      <div class="item">
       <div class="header">oh no this header wraps</div>
        <div class="content">some content lala </div>
      </div>
  </div>
</div>

---

由于有些人更喜欢普通的 javascript，我也更新了这样的示例(在所有元素上设置相同的高度)，它使用计算的 height 值动态应用/添加类。

堆栈片段

(function(d,t,h) {
  /*  preload some variables  */
  h = (d.head || d.getElementsByTagName('head')[0]);
  var items = d.querySelectorAll('.header');
  
  function resized() {
    var heights = [], i = 0, css;
    /*  delete set style so we get proper value  */
    removeElement('head_dynamic_css');
    for (i = 0; i < items.length; i++) {
      heights.push(parseFloat(window.getComputedStyle(items[i], null).getPropertyValue("height")));
    }
    css = ".header { height: " + Math.max.apply(null, heights) + "px; }";
    /*  create and add style with height  */
    var s = d.createElement('style');
    s.type = 'text/css';
    s.id = 'head_dynamic_css';
    if (s.styleSheet) {
      s.styleSheet.cssText = css
    } else {
      s.appendChild(d.createTextNode(css));
    }
    h.appendChild(s);
  }

  window.addEventListener("load", resized, false);
  window.addEventListener("resize", resizer, false);
  function resizer() {
    if (!t) {
      t = setTimeout(function() {
        t = null;
        resized();
       }, 66);
    }
  }
  function removeElement(el) {
    var el = document.getElementById(el);
    if (el) {
      el.parentElement.removeChild(el);
    }
  }
}(document,null));

body {
  padding: 20px;
}

.item {
  height: 100%;
  padding-right: 20px;
  padding-top: 20px;
  display: flex;
  flex-direction: column
}

.header {
  background-color: cornflowerblue;
}

.content {
  background-color: salmon;
  flex-grow: 1;
}

.mycontainer {
  max-width: 500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet"/>

<div class="row mycontainer">
  <div class="col-12 col-md-4 col-lg-3">
    <div class="item">
       <div class="header">bippo</div>
        <div class="content">some content lala some content lala </div>
    </div>
  </div>
    <div class="col-12 col-md-4 col-lg-3">
    <div class="item">
       <div class="header">bippo</div>
        <div class="content">some content lala </div>
    </div>
  </div>
    <div class="col-12 col-md-4 col-lg-3">
      <div class="item">
       <div class="header">bippo</div>
        <div class="content">some content lala </div>
      </div>
  </div>
  <div class="col-12 col-md-4 col-lg-3">
    <div class="item">
       <div class="header">bippo</div>
        <div class="content">some content lala </div>
    </div>
  </div>
    <div class="col-12 col-md-4 col-lg-3">
    <div class="item">
       <div class="header">bippo</div>
        <div class="content">some content lala some content lala some content lala </div>
    </div>
  </div>
    <div class="col-12 col-md-4 col-lg-3">
      <div class="item">
       <div class="header">oh no this header wraps</div>
        <div class="content">some content lala </div>
      </div>
  </div>
</div>