每4个项目重新启动每个循环

Question

我有一个UI，该UI在一行中有4个组件，有多个行，并且每个组件的高度都根据其中的内容而变化。

我希望同一行中的每个组件都具有相同的高度，该高度由该行中最高的组件设置，并且对于每一行，在设置高度方面彼此独立。其中的组件。

我目前遇到的问题是，如果不中断循环，每个组件将占据页面上最高组件的高度，但是如果我在index < 4处断开组件，则每个组件都会取第一行中最高的组件的高度。

jsfiddle here

var maxComponentHeight = -1;

$('.component').each(function() {
  var componentHeight = $(this).outerHeight();

  if ($(this).index() < 4) {
    if (componentHeight > maxComponentHeight) {
      maxComponentHeight = componentHeight;
    }
  } else {
    return false
  }
})

$('.button button').on('click', function() {
  $('.component').css('height', maxComponentHeight);
})

.button {
  padding: 25px;
  text-align: center;
}

.component {
  background-color: gray;
  border: 2px solid white;
  color: white;
  font-family: helvetica;
  text-align: center;
  height: 100px;
}

.component:nth-child(2) {
  height: 200px;
}

.component:nth-child(7) {
  height: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class='button'>
  <button>
    align heights
  </button>
</div>

<div class="row">
  <div class="col-3 component">
    component
  </div>
  <div class="col-3 component">
    component
  </div>
  <div class="col-3 component">
    component
  </div>
  <div class="col-3 component">
    component
  </div>
  <div class="col-3 component">
    component
  </div>
  <div class="col-3 component">
    component
  </div>
  <div class="col-3 component">
    component
  </div>
  <div class="col-3 component">
    component
  </div>
</div>

Answer 1

我更喜欢在单击按钮后重新计算函数内部的所需高度，这样我可以为每4个元素设置高度，而不是为所有元素设置预设高度：

function setHeight(){
  var maxComponentHeight = -1;
  var counter=0;
  var currentRow;

  $('.component').each(function() {
    var componentHeight = $(this).outerHeight();
    counter++;
    if (componentHeight > maxComponentHeight) {
      maxComponentHeight = componentHeight;
    }
    
    if (counter==4){

        currentRow= Math.floor($(this).index()/4);
        
        //Selecting elements in same row 
        //by comparing the quotient against 4
        
        $('.component').filter(function(){
          if (Math.floor($(this).index()/4)==currentRow){
            return true;
          }
          else{
            return false;
          }
        }).css('height', maxComponentHeight);
        
        counter=0;
        maxComponentHeight = -1;
    }
  })
}

$('.button button').on('click', function() {
 setHeight();
})

.button {
  padding: 25px;
  text-align: center;
}

.component {
  background-color: gray;
  border: 2px solid white;
  color: white;
  font-family: helvetica;
  text-align: center;
  height: 100px;
}

.component:nth-child(2) {
  height: 200px;
}

.component:nth-child(7) {
  height: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class='button'>
  <button>
    align heights
  </button>
</div>

<div class="row">
  <div class="col-3 component">
    component
  </div>
  <div class="col-3 component">
    component
  </div>
  <div class="col-3 component">
    component
  </div>
  <div class="col-3 component">
    component
  </div>
  <div class="col-3 component">
    component
  </div>
  <div class="col-3 component">
    component
  </div>
  <div class="col-3 component">
    component
  </div>
  <div class="col-3 component">
    component
  </div>
</div>

Answer 2

您需要收集每一行的最大高度，然后在单击后分配新的高度。

var maxComponentHeight = -1;
var maxComponentHeightRow=[];
$('.component').each(function() {
  var componentHeight = $(this).outerHeight();
    if (componentHeight > maxComponentHeight) {
      maxComponentHeight = componentHeight;
    }
       
      let index = Number($(this).index());
      if ( index % 4 === 3 ) {       
        maxComponentHeightRow.push(maxComponentHeight);
        maxComponentHeight=-1;
      } 
})


$('.button button').on('click', function() {
  let index = 0;
  $('.component').each(function() {
  $(this).css('height', maxComponentHeightRow[index]);
  //console.log(maxComponentHeightRow[index]);
    if (Number($(this).index()) % 4 === 3 ) {
      index ++;
    }
  })
})

.button {
  padding: 25px;
  text-align: center;
}

.component {
  background-color: gray;
  border: 2px solid white;
  color: white;
  font-family: helvetica;
  text-align: center;
  height: 100px;
}

.component:nth-child(2) {
  height: 200px;
}

.component:nth-child(7) {
  height: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class='button'>
  <button>
    align heights
  </button>
</div>

<div class="row">
  <div class="col-3 component">
    component
  </div>
  <div class="col-3 component">
    component
  </div>
  <div class="col-3 component">
    component
  </div>
  <div class="col-3 component">
    component
  </div>
  <div class="col-3 component">
    component
  </div>
  <div class="col-3 component">
    component
  </div>
  <div class="col-3 component">
    component
  </div>
  <div class="col-3 component">
    component
  </div>
</div>

Answer 3

您是否有任何特定原因想要使用JavaScript而不是CSS来计算高度？

以下是一些示例代码，这些示例使用弹性框布局填充提供的空间，听起来像您想要的。如果您想要固定数量的列，网格也是另一个不错的选择。

.button {
  padding: 25px;
  text-align: center;
}

.row {
  display: flex;
}

.component {
  background-color: gray;
  border: 2px solid white;
  color: white;
  font-family: helvetica;
  text-align: center;
  min-height: 100px;
}

.component:nth-child(2) {
  min-height: 200px;
}

.component:nth-child(7) {
  min-height: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-3 component">
    component
  </div>
  <div class="col-3 component">
    component
  </div>
  <div class="col-3 component">
    component
  </div>
  <div class="col-3 component">
    component
  </div>
  <div class="col-3 component">
    component
  </div>
  <div class="col-3 component">
    component
  </div>
  <div class="col-3 component">
    component
  </div>
  <div class="col-3 component">
    component
  </div>
</div>