如何无空白间隙打乱div标签？现有JS代码失效仍出现空白

我来帮你排查下问题所在，你的洗牌代码逻辑有几个小问题，导致偶尔出现空白间隙，咱们一步步来解决：

原代码的问题分析 #

• 静态集合导致的操作混乱：你使用的$(".random")是jQuery的静态DOM集合，当你在循环里移动元素时，这个集合并不会自动更新，后续循环还是基于初始的元素列表，这会引发重复移动或位置错位的问题。
• 低效且有偏差的洗牌逻辑：随机选择两个位置交换的方式不是标准的洗牌算法，容易出现元素位置重复、布局混乱，进而产生空白间隙。
• 冗余的循环次数：循环执行cards.length次完全没必要，标准洗牌只需要遍历一次即可完成。

修复方案：使用Fisher-Yates洗牌算法 #

Fisher-Yates是公认的无偏高效洗牌算法，能确保每个元素的位置随机且唯一，同时我们会重新构建DOM顺序避免布局问题：

// 1. 将jQuery集合转换为原生数组，方便洗牌操作
const cards = Array.from($(".random"));

// 2. 执行Fisher-Yates洗牌算法
for (let i = cards.length - 1; i > 0; i--) {
  // 生成0到i之间的随机索引
  const randomIndex = Math.floor(Math.random() * (i + 1));
  // 交换当前元素和随机位置的元素
  [cards[i], cards[randomIndex]] = [cards[randomIndex], cards[i]];
}

// 3. 获取父容器，清空后重新添加打乱后的元素
const parentContainer = $(".random").parent();
parentContainer.empty().append(cards);

为什么这样能解决问题？ #

• 无偏洗牌：Fisher-Yates算法确保每个元素都有均等的概率出现在任意位置，不会出现重复或遗漏的情况。
• 重新构建DOM顺序：通过清空父容器再重新添加打乱后的元素，确保DOM结构是完全重新排列的，避免了原代码中多次移动元素导致的布局错位，从根源上消除空白间隙。

额外注意事项 #

如果你的.random元素高度不一致，可能需要给父容器添加Bootstrap的d-flex flex-wrap类，强制元素按网格布局排列，进一步避免间隙问题：

<div class="row d-flex flex-wrap">
  <!-- 你的.col-sm-4.random元素 -->
</div>

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