颤动-设置列表平铺高度

.list-item {
    height: 200px; /* 根据需要调整高度 */
    overflow: hidden; /* 隐藏超出部分，保持高度一致 */
}

.list-container {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
}

.list-item {
    flex: 1 1 calc(25% - 10px); /* 每个列表项占据25%宽度，减去间距 */
    margin: 5px; /* 列表项之间的间距 */
}

.list-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 四列布局 */
    grid-gap: 10px; /* 列表项之间的间距 */
}

function setListItemHeight() {
    const items = document.querySelectorAll('.list-item');
    let maxHeight = 0;
    items.forEach(item => {
        item.style.height = 'auto'; // 先恢复为自动高度以测量实际内容高度
        maxHeight = Math.max(maxHeight, item.clientHeight);
    });
    items.forEach(item => {
        item.style.height = `${maxHeight}px`; // 设置统一高度
    });
}

// 在内容加载完成后调用此函数
window.addEventListener('load', setListItemHeight);