时间戳

首页 > 解决方案 > 循环遍历项目数组以查看前一个项目的高度是否更高

javascript - 循环遍历项目数组以查看前一个项目的高度是否更高

问题描述

我有一个 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>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet,</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>

标签： javascriptcss

解决方案

尝试：

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)
}

推荐阅读