使用复选框过滤Masonry瀑布流后如何让图片同行排列无空白？

问题原因 #

Masonry 初始化时会预先计算所有.grid-item的坐标位置，你当前仅修改了元素的显示/隐藏状态，没有触发Masonry重新计算布局，被隐藏元素的原有位置会被保留，因此出现大量空白。

解决步骤 #

1. 手动初始化Masonry并保存实例，方便后续调用布局方法
2. 每次筛选完成后，调用Masonry提供的API重新识别可见元素并重排布局

修改后的代码 #

第一步：修改Masonry初始化逻辑 #

删除原有HTML中.products-by-room元素上的data-masonry属性，改为JS手动初始化：

// 全局存储Masonry实例
let masonryGrid;
$(function() {
  // 初始化Masonry
  masonryGrid = $('.products-by-room').masonry({
    itemSelector: '.grid-item',
    percentPosition: true, // 适配百分比宽度的布局计算
    columnWidth: '.grid-item'
  });
});

第二步：修改筛选逻辑，筛选完成后触发重排 #

修改原有的筛选JS，在所有元素显示/隐藏操作完成后调用重排方法：

$(function(){
  $('form').find("input").on('change',function(){
    let selected = [];
    $('form').find("input").each(function(){
      if($(this).is(":checked")){
        selected.push($(this).val());
      }
    })

    if(!selected.length){
      $(".products-by-room > .grid-item").show();
    } else {
      $(".products-by-room > .grid-item").hide();
      $(".products-by-room > .grid-item").each(function(){
        const category = $(this).attr('data-category');
        const categorySplitted = category.split(' ');
        // 只要匹配到任意选中分类就显示
        const isMatch = categorySplitted.some(cat => selected.includes(cat));
        if (isMatch) $(this).show();
      });
    }

    // 核心：重新加载可见元素并重排布局
    masonryGrid.masonry('reloadItems').masonry('layout');
  });
});

可选优化（解决图片加载导致的高度计算偏差） #

如果出现图片加载完成后布局错位的问题，可以引入imagesLoaded插件，在所有图片加载完成后自动触发布局更新：

// 初始化Masonry时增加这段代码
masonryGrid.imagesLoaded().progress(function() {
  masonryGrid.masonry('layout');
});

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