如何在CSS Grid中随机打乱宾果板div元素的排列顺序？

要打乱CSS Grid里的网格项顺序，最可靠的方式是用JavaScript结合Fisher-Yates洗牌算法来重新排列元素，下面是完整的实现步骤：

1. 基础HTML结构 #

先搭建好网格容器、25个网格项和洗牌按钮：

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
  <div class="grid-item">10</div>
  <div class="grid-item">11</div>
  <div class="grid-item">12</div>
  <div class="grid-item">13</div>
  <div class="grid-item">14</div>
  <div class="grid-item">15</div>
  <div class="grid-item">16</div>
  <div class="grid-item">17</div>
  <div class="grid-item">18</div>
  <div class="grid-item">19</div>
  <div class="grid-item">20</div>
  <div class="grid-item">21</div>
  <div class="grid-item">22</div>
  <div class="grid-item">23</div>
  <div class="grid-item">24</div>
  <div class="grid-item">25</div>
</div>
<button id="shuffleBtn">洗牌</button>

2. CSS Grid布局 #

保持你原来的Grid布局设置，简单调整样式让界面更美观：

.grid-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  max-width: 500px;
  margin: 20px auto;
}

.grid-item {
  padding: 20px;
  font-size: 18px;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 6px;
  background-color: #f8f8f8;
}

#shuffleBtn {
  display: block;
  margin: 0 auto;
  padding: 10px 25px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  background-color: #4CAF50;
  color: white;
}

3. JavaScript洗牌逻辑 #

核心用Fisher-Yates算法（无偏洗牌，比随机排序更可靠），实现点击按钮后打乱网格项：

// 获取DOM元素
const gridContainer = document.querySelector('.grid-container');
const shuffleBtn = document.getElementById('shuffleBtn');

// Fisher-Yates洗牌函数
function shuffleArray(array) {
  let currentIndex = array.length;
  
  while (currentIndex > 0) {
    // 随机选取一个未打乱的元素
    const randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;
    // 交换当前元素和随机元素的位置
    [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
  }
  return array;
}

// 绑定洗牌按钮点击事件
shuffleBtn.addEventListener('click', () => {
  // 将网格项转为数组
  const itemsArray = Array.from(gridContainer.children);
  // 洗牌
  const shuffledItems = shuffleArray(itemsArray);
  // 清空容器后重新插入洗牌后的元素
  gridContainer.innerHTML = '';
  shuffledItems.forEach(item => gridContainer.appendChild(item));
});

为什么不用array.sort(() => Math.random() - 0.5)？ #

这种随机排序方法有概率偏倚，某些元素更容易停留在原位置，而Fisher-Yates算法是经过验证的无偏洗牌方式，能保证每个元素出现在任意位置的概率相等。

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