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

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 = () => {

  const Allitem    = document.querySelectorAll('.item')

      , MaxHeight  = 0

  Allitem.forEach(item=>{ item.style.minHeight = '' }) // remove values

  MaxHeight = Array.from(Allitem).reduce((a,c)=>a<c.clientHeight?c.clientHeight:a,0)

  Allitem.forEach(item=>{ item.style.minHeight = `${MaxHeight}px` })

}

对于只有同一行的单元格必须具有相同高度的情况：

const updateSize = () => {

  const Allitems    = document.querySelectorAll('.item')

    let ItemsOnLine = []

      , topPos      = -99999

      , MaxHeight   = 0

  const setHeights  = h => ItemsOnLine.forEach(item=>{ item.style.minHeight = `${h}px` })

  Allitems.forEach(item=>{ item.style.minHeight = '' }) // remove values

  Allitems.forEach(item=>{

    if (item.offsetTop != topPos)

    {

      setHeights(MaxHeight)

      MaxHeight          = 0

      ItemsOnLine.length = 0

      topPos             = item.offsetTop

    }

    MaxHeight = Math.max(MaxHeight, item.clientHeight )

    ItemsOnLine.push( item )

  })

  setHeights(MaxHeight)

}