过滤后Bootstrap卡片无法自动重排，如何实现重排？

你遇到的问题是因为使用了Masonry布局插件，当你通过JS修改卡片的显示状态后，Masonry并没有自动感知到DOM的变化，所以不会重新排列卡片——只有窗口大小改变时，Masonry才会自动触发重排逻辑。要解决这个问题，只需要在过滤操作完成后，手动调用Masonry的布局更新方法即可。

具体修改步骤： #

1. 获取Masonry实例并触发重排
   在你的prova函数末尾，添加代码来获取已初始化的Masonry实例，并调用它的layout()方法，强制重新计算卡片布局。同时建议用Bootstrap的d-none类控制显示隐藏，比直接修改display属性更符合框架规范。

   修改后的JS代码如下：

   function prova(){
       const input = document.getElementById('filter').value.toUpperCase();
       const card = document.getElementsByClassName('card');
   
       for (let i = 0; i < card.length; i++) {
         let title = card[i].querySelector(".card-body h3.card-title");
   
         if (title.innerText.toUpperCase().indexOf(input) > -1){
           card[i].closest('.col-sm-6').classList.remove('d-none');
         }else {
           card[i].closest('.col-sm-6').classList.add('d-none');
         }
       }
   
       // 获取Masonry实例并触发重排
       const gridElement = document.getElementById('myItems');
       const masonry = Masonry.data(gridElement);
       if (masonry) {
           masonry.layout();
       }
   }
   

2. 确保Masonry脚本加载完成
   原代码中Masonry脚本是async加载的，可能出现过滤函数调用时脚本还未加载完成的情况。可以去掉async属性，或者在函数里增加判断避免报错：

   function prova(){
       // 先检查Masonry是否已加载
       if (typeof Masonry === 'undefined') {
           console.warn('Masonry尚未加载完成，请稍后重试');
           return;
       }
   
       // 剩余过滤逻辑...
   }
   

为什么这样有效？ #

Masonry默认只监听窗口resize事件来触发重排，但不会自动监听DOM元素显示状态的变化。手动调用layout()方法会让Masonry重新扫描容器内的可见元素，重新计算它们的位置并排列，从而实现过滤后的自动重排。

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