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

标签 jquery twitter-bootstrap css flexbox

请勿破解

没有硬编码。这个想法不是解决一个案例，例如对于有 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结构的一般变化也很好。但必须响应正确。

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

enter image description here

最佳答案

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

还有脚本方式，这里使用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>

关于jquery - 如何从卡片或类似的东西中获取标题以与 flexbox 具有相同的高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48783231/

上一篇：javascript - 在 Javascript 中调整 Canvas 背景

下一篇：Visual Studio Code 中的 CSS - 选择多行并分别注释选择中的每一行

相关文章：

css - webpack bootstrap-loader 会发出 bootstrap.js 而不是 bootstrap.css 文件？

html - 创建下拉表单标题 Django/HTML/CSS

ios - iPhone4/4S 对比其他媒体查询

javascript - 如何在悬停时显示子菜单

javascript - 允许用户添加表单输入字段: Why is append() only working once?

javascript - 在新选项卡中打开重定向页面并在多个重定向 Django 的同一选项卡中重新打开

css - IE6 图片宽高比，CSS

javascript - codeigniter:使用 jquery 克隆方法对动态创建的文本字段进行验证

twitter-bootstrap - 媒体查询、 Bootstrap 和 css3-mediaqueries-js - 媒体类型(屏幕、手持设备等)是否可选？

css - Font Family Open Sans 未被使用

©2024 IT工具网  联系我们