使用 J*aScript 实现 CSS Grid 元素动态随机排序_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

使用 J*aScript 实现 CSS Grid 元素动态随机排序

2025-11-30

浏览次数：次

返回列表

使用 JavaScript 实现 CSS Grid 元素动态随机排序

本教程详细介绍了如何利用 j*ascript 实现 css grid 布局中元素的动态随机排序。通过生成初始元素、使用洗牌算法对数据进行随机化，并动态更新 dom，我们可以轻松创建如宾果板等需要随机显示内容的应用。文章将提供完整的代码示例，并解释其实现原理，帮助开发者理解和应用这一技术。

在现代网页开发中，CSS Grid 布局为我们提供了强大的二维布局能力。然而，CSS Grid 本身并没有内置的机制来直接随机化网格项（grid-item）的显示顺序。对于需要动态改变元素位置的场景，例如制作一个可随机洗牌的宾果板，我们需要结合 J*aScript 来实现元素的顺序管理和 DOM 操作。

核心原理

实现 CSS Grid 元素随机排序的核心思想是：

数据与视图分离： 维护一个包含所有网格项内容的数组。
随机化数据： 使用 J*aScript 对这个数组进行随机洗牌。
动态更新 DOM： 根据洗牌后的数组顺序，重新生成或更新 HTML 元素，并将其插入到 CSS Grid 容器中。

实现步骤与代码示例

我们将通过一个简单的宾果板示例来演示这一过程。

1. HTML 结构

首先，我们需要一个容器来承载我们的网格项，以及一个按钮来触发洗牌操作。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid 随机排序</title>
    <style>
        #bingo {
            display: grid;
            grid-template-columns: repeat(5, 1fr); /* 5x5 网格 */
            gap: 10px; /* 网格项间距 */
            width: 500px;
            margin: 20px auto;
            border: 1px solid #ccc;
            padding: 10px;
        }
        .grid-item {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 80px;
            background-color: #f0f0f0;
            border: 1px solid #ddd;
            font-size: 1.5em;
            font-weight: bold;
        }
        button {
            display: block;
            margin: 20px auto;
            padding: 10px 20px;
            font-size: 1em;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <div id="bingo">
        <!-- 网格项将由 J*aScript 动态生成 -->
    </div>

    <button onclick="shuffleBoard()">洗牌</button>

    <script>
        // J*aScript 代码将在这里
    </script>

</body>
</html>

在上述 HTML 中，我们定义了一个 div 元素作为 CSS Grid 容器 (#bingo)，并为其应用了基本的 CSS Grid 样式，使其呈现为一个 5x5 的网格布局。grid-item 类则定义了每个网格项的样式。

2. J*aScript 逻辑

接下来是核心的 J*aScript 部分，它负责生成初始的网格项，并在点击按钮时进行洗牌。

来画数字人|直播|

来画数字人自动化|直播|，无需请真人主播，即可实现24小时|直播|，无缝衔接各大|直播|平台。

57 查看详情来画数字人直播

    // 初始化宾果板
    makeBoard();

    /**
     * 生成初始宾果板的网格项。
     * 从 1 到 25 顺序生成数字。
     */
    function makeBoard() {
        let str = "";
        for (let i = 1; i <= 25; i++) {
            str += "<div class='grid-item'>" + i + "</div>";
        }
        document.getElementById("bingo").innerHTML = str;
    }

    /**
     * 随机洗牌宾果板的网格项。
     * 使用 Fisher-Yates (或类似) 洗牌算法的变体。
     */
    function shuffleBoard() {
        // 原始数字数组
        let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25];
        let str = "";

        // 循环直到 numbers 数组为空
        while (numbers.length > 0) {
            // 随机生成一个索引
            const randomIndex = Math.floor(Math.random() * numbers.length);
            // 将随机选中的数字添加到 HTML 字符串
            str += "<div class='grid-item'>" + numbers[randomIndex] + "</div>";
            // 从数组中移除已选中的数字，确保不重复
            numbers.splice(randomIndex, 1);
        }
        // 更新 #bingo 容器的内部 HTML
        document.getElementById("bingo").innerHTML = str;
    }

代码解析：

makeBoard() 函数：
- 在页面加载时调用，用于初始化宾果板。
- 它循环从 1 到 25，为每个数字创建一个 div 元素字符串，并将其累加到 str 变量中。
- 最后，通过 document.getElementById("bingo").innerHTML = str; 将生成的 HTML 字符串插入到 #bingo 容器中。
shuffleBoard() 函数：
- 当用户点击“洗牌”按钮时触发。
- 首先，它定义了一个包含 1 到 25 所有数字的 numbers 数组。
- 进入一个 while 循环，只要 numbers 数组中还有元素就继续执行。
- 在循环内部：
  - Math.random() * numbers.length 生成一个介于 0（包含）和 numbers.length（不包含）之间的浮点数。
  - Math.floor() 将其向下取整，得到一个有效的数组索引 randomIndex。
  - numbers[randomIndex] 获取随机选中的数字，并将其包裹在 div 标签中添加到 str 字符串。
  - numbers.splice(randomIndex, 1) 从 numbers 数组中移除这个已经被选中的数字，防止重复。
- 循环结束后，str 变量包含了所有数字的随机排序的 HTML 字符串。
- 同样，document.getElementById("bingo").innerHTML = str; 将新的随机排序的 HTML 更新到页面上。

注意事项与优化

性能考量： 对于少量元素（如本例中的 25 个），直接操作 innerHTML 是可接受的。但如果网格项数量非常庞大，频繁地完全重绘 DOM 可能会导致性能问题。在这种情况下，可以考虑使用更精细的 DOM 操作（如 appendChild、insertBefore 配合 DocumentFragment），或者利用虚拟 DOM 库（如 React, Vue）来优化更新效率。
洗牌算法： 示例中使用的随机选择并移除的逻辑是 Fisher-Yates (Knuth) 洗牌算法的一个变体，它能确保每个排列组合的概率均等。
数据源： 在实际应用中，网格项的内容可能不仅仅是数字，可以是更复杂的数据对象。可以将这些数据对象存储在数组中，然后对数组进行洗牌，再根据洗牌后的数据渲染对应的 HTML。
可访问性： 如果元素的视觉顺序变化对用户理解内容有重要影响，需要考虑如何通过 ARIA 属性或其他方式提升可访问性。
CSS order 属性： 虽然 CSS Grid 有 order 属性可以改变网格项的视觉顺序，但它通常用于调整少数元素的顺序，而不是大规模的随机化。如果要使用 order 属性，你需要通过 J*aScript 为每个元素生成一个随机的 order 值，这可能比直接重新渲染 innerHTML 更复杂，且在某些浏览器中 order 的随机性可能不如直接 DOM 排序直观。