Javascript 获取元素的高度并将最大值应用于最小元素

我有一个3列的卡片布局。卡片中的信息是动态调整的，有时一张卡片中的信息比下一张卡片中的信息少。我用vanilla JS平衡了这些框，但我认为必须有一种更优雅的方法来解决这个问题（）：

const-box=document.querySelectorAll（'.event-link.content'）；
如果（！box.length）返回；
设最高值=0；
用于（一盒一盒）{
const-boxHeightStyle=getComputedStyle（box）.height；
const boxHeight=parseInt（boxHeight样式）；
如果（箱高>最高）{
最高=箱高；
}
}
用于（一盒一盒）{
const-boxHeightStyle=getComputedStyle（box）.height；
const boxHeight=parseInt（boxHeight样式）；
如果（箱高<最高）{
box.style.height=`${highest}px`；
}
}

我将两个循环分开，因为在第一个循环中，我只找到最高的像素高度，然后将最高的数字应用于第二个循环中的最小元素

---

这可以结合使用吗？

我建议使用flexbox方法，将卡片中的一些内容设置为flex grow以填充剩余空间，并且它们应该填充容器中给定的空间。如果没有，请根据内容（在js中检查）或根据内容确定的任意高度提供最大高度。

这可以结合使用吗？更短并不总是意味着更好。最好有易于理解和维护的代码。您可以跳过一个循环，在第一个循环中的所有元素中添加一个类，然后用该类强制执行高度。

const boxes = document.querySelectorAll('.event-link .content');

if (!boxes.length) return;

let highest = 0;

for (let box of boxes) {
    const boxHeightStyle = getComputedStyle(box).height;
    const boxHeight = parseInt(boxHeightStyle);

    if (boxHeight > highest) {
        highest = boxHeight;
    }
}

for (let box of boxes) {
    const boxHeightStyle = getComputedStyle(box).height;
    const boxHeight = parseInt(boxHeightStyle);

    if (boxHeight < highest) {
        box.style.height = `${highest}px`;
    }
}