循环遍历项目数组以查看前面的项目是否具有更高的高度

Question

我有一个 2x2 网格，我试图根据其中一个的高度是否大于另一个来设置最小高度。这样左右将具有相同的高度。我在这里寻找 CSS 只是 js。

我在调整大小事件上有这个。

const updateSize = () => {

  const group = Array.from(document.querySelectorAll('.items'));

  const heights = group.map(item => item.clientHeight);

  group.forEach((item, index) => {

    const count = index % 2;

    if (count === 1) {

      const h = heights[index - 1];

      item.style.minHeight = `${h}px`;

    }

  });

};

以上工作，但唯一的问题是它只检查最后一个项目，如果当前项目的高度大于第一个项目，则不起作用。我需要一种方法来检查最后一个并更新相应的项目。

这是布局。请注意，底部的灰色框未对齐：

body {

  background: #20262E;

  font-family: Helvetica;

  width: 100%;

}

.component {

   width: 100%;

}

.grid {

  display: grid;

  width: 100%;

  grid-template-columns: repeat(2, 50%);  

}

.item {

  border: 1px solid green;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}

.images-collection {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

}

.image {

  width: 100px;

  height: 100px;

  border: 1px solid white;

}

.textWrapper {

  border: 1px solid blue;

  display: flex;

  justify-content: center;

  align-content: flex-end;

  background-color: gray;

}

.text {

  text-align: center;

  color: white;

  width: 300px;

}

<div class="component">

  <div class="grid">

    <div class="item">

      <div class="images-collection">

        <div class="image"></div>

        <div class="image"></div>

        <div class="image"></div>

        <div class="image"></div>

        <div class="image"></div>

        <div class="image"></div>

        <div class="image"></div>

        <div class="image"></div>

        <div class="image"></div>

        <div class="image"></div>

      </div>

      <div class="textWrapper">

         <div class="text">

          <p>This is my title</p>

        </div>

      </div>

    </div>

     <div class="item">

      <div class="images-collection">

        <div class="image"></div>

      </div>

      <div class="textWrapper">

         <div class="text">

          <p>This is my title</p>

          <p>Lorem ipsum dolor sit amet.</p>

        </div>

      </div>

    </div>

  </div>

</div>

Answer 1

尝试：const updateSize = () => {&nbsp; const Allitem&nbsp; &nbsp; = document.querySelectorAll('.item')&nbsp; &nbsp; &nbsp; , MaxHeight&nbsp; = 0&nbsp; Allitem.forEach(item=>{ item.style.minHeight = '' }) // remove values&nbsp; MaxHeight = Array.from(Allitem).reduce((a,c)=>a<c.clientHeight?c.clientHeight:a,0)&nbsp; Allitem.forEach(item=>{ item.style.minHeight = `${MaxHeight}px` })}对于只有同一行的单元格必须具有相同高度的情况：const updateSize = () => {&nbsp; const Allitems&nbsp; &nbsp; = document.querySelectorAll('.item')&nbsp; &nbsp; let ItemsOnLine = []&nbsp; &nbsp; &nbsp; , topPos&nbsp; &nbsp; &nbsp; = -99999&nbsp; &nbsp; &nbsp; , MaxHeight&nbsp; &nbsp;= 0&nbsp; const setHeights&nbsp; = h => ItemsOnLine.forEach(item=>{ item.style.minHeight = `${h}px` })&nbsp; Allitems.forEach(item=>{ item.style.minHeight = '' }) // remove values&nbsp; Allitems.forEach(item=>{&nbsp; &nbsp; if (item.offsetTop != topPos)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; setHeights(MaxHeight)&nbsp; &nbsp; &nbsp; MaxHeight&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; = 0&nbsp; &nbsp; &nbsp; ItemsOnLine.length = 0&nbsp; &nbsp; &nbsp; topPos&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;= item.offsetTop&nbsp; &nbsp; }&nbsp; &nbsp; MaxHeight = Math.max(MaxHeight, item.clientHeight )&nbsp; &nbsp; ItemsOnLine.push( item )&nbsp; })&nbsp; setHeights(MaxHeight)}