如何消除网格布局中隐藏元素的空白，让可见元素自动重新排布？

你遇到的问题核心原因很明确：你当前隐藏的是.itemContainer这个内部div，但Grid布局的直接子元素是<li>标签——这些li并没有被隐藏，它们依然占据着网格的位置，所以即使里面的div看不见了，网格的空白还是会保留。

要实现可见元素紧凑排列的效果，我们需要让Grid的直接子元素（也就是li）被真正移除出布局，而不是只隐藏内部的容器。这里有两种可行的方案：

方案一：调整HTML结构，将稀有度类绑定到li上 #

这种方式更直观，让Grid的子元素直接携带筛选标识：

修改后的HTML #

<ul id="catalogGrid">
    <li class="rare">
        <div class="itemContainer">
        </div>
    </li>
    <li class="veryrare">
        <div class="itemContainer">
        </div>
    </li>
    <li class="uncommon">
        <div class="itemContainer">
        </div>
    </li>
    <li class="uncommon">
        <div class="itemContainer">
        </div>
    </li>
    <li class="rare">
        <div class="itemContainer">
        </div>
    </li>
    <li class="rare">
        <div class="itemContainer">
        </div>
    </li>
</ul>

优化后的JS代码 #

var ChangeLayout = function(rarity) {
    // 获取所有网格子元素li
    const listItems = document.querySelectorAll("#catalogGrid li");
    
    if (rarity === 'all') {
        // 显示所有li
        listItems.forEach(item => {
            item.style.display = 'block';
        });
    } else {
        // 只显示带有对应稀有度类的li，隐藏其他
        listItems.forEach(item => {
            item.style.display = item.classList.contains(rarity) ? 'block' : 'none';
        });
    }
}

方案二：不修改HTML，通过父元素控制li的显示/隐藏 #

如果不想调整现有HTML结构，可以通过.itemContainer找到它的父元素li，再控制li的display属性：

修改后的JS代码 #

var ChangeLayout = function(rarity) {
    const listItemContainers = document.querySelectorAll(".itemContainer");
    
    if (rarity === 'all') {
        listItemContainers.forEach(container => {
            // 让父元素li显示
            container.parentElement.style.display = 'block';
        });
    } else {
        listItemContainers.forEach(container => {
            // 判断当前容器是否属于目标稀有度，控制父元素li的显示状态
            const isTargetRarity = container.classList.contains(rarity);
            container.parentElement.style.display = isTargetRarity ? 'block' : 'none';
        });
    }
}

额外优化建议 #

• 尽量使用querySelectorAll代替getElementsByClassName：前者返回的是静态DOM集合，不会随DOM变化动态更新，性能更稳定；
• 可以考虑用CSS类来控制显示/隐藏，比如定义一个.hidden { display: none; }类，通过添加/移除类来实现效果，代码更易维护。

内容的提问来源于stack exchange，提问作者kyllion001