如何通过点击按钮用JavaScript随机打乱容器内多个div的位置

你的思路其实绕远了——没必要把卡片设为absolute让它们重叠，利用现有的Grid布局直接打乱卡片在容器中的DOM顺序就行，这是更简单且易维护的方案。下面是具体的修改步骤和完整代码：

步骤1：简化卡片点击事件绑定 #

你原来分别给不同卡片类绑定点击事件的代码可以简化，直接选中所有.card元素统一绑定：

document.querySelectorAll(".card").forEach(card => {
  card.addEventListener('click', flipCard);
});

function flipCard(e) {
  e.currentTarget.classList.toggle("flip");
}

步骤2：实现洗牌逻辑（Fisher-Yates算法） #

用Fisher-Yates洗牌算法来公平打乱卡片数组，这是业界通用的随机打乱方案，代码简单易懂：

function shuffleCards() {
  const container = document.querySelector('.card-container');
  // 将容器内的卡片转为数组
  const cards = Array.from(container.children);
  
  // 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]];
  }
  
  // 将打乱后的卡片重新添加到容器中（DOM元素移动会自动更新布局）
  cards.forEach(card => container.appendChild(card));
}

步骤3：修改洗牌按钮的事件监听 #

替换你原来设置absolute的代码，直接调用洗牌函数：

document.querySelector(".position-button").addEventListener("click", shuffleCards);

修改后的完整JavaScript代码 #

// 卡片点击翻转事件
document.querySelectorAll(".card").forEach(card => {
  card.addEventListener('click', flipCard);
});

function flipCard(e) {
  e.currentTarget.classList.toggle("flip");
}

// 翻转所有卡片事件
document.querySelector(".flip-all-cards").addEventListener("click", function(){
  document.querySelectorAll(".card").forEach(card => {
    card.classList.toggle("flip");
  });
});

// 洗牌逻辑
function shuffleCards() {
  const container = document.querySelector('.card-container');
  const cards = Array.from(container.children);
  
  for (let i = cards.length - 1; i > 0; i--) {
    const randomIndex = Math.floor(Math.random() * (i + 1));
    [cards[i], cards[randomIndex]] = [cards[randomIndex], cards[i]];
  }
  
  cards.forEach(card => container.appendChild(card));
}

// 洗牌按钮绑定
document.querySelector(".position-button").addEventListener("click", shuffleCards);

为什么这个方案更好？ #

• 无需修改卡片的定位属性，保持原来的Grid布局自动排列，不会出现卡片重叠或布局混乱的问题
• 逻辑直观：直接操作DOM元素的顺序，新手更容易理解和调试
• Fisher-Yates算法保证每次打乱的结果是公平随机的，没有偏向性

你的HTML和CSS代码不需要任何改动，直接替换上述JavaScript代码即可实现点击按钮打乱卡片的功能。

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