使用JavaScript和jQuery按规则随机重排DOM元素-js教程-PHP中文网

使用JavaScript和jQuery按规则随机重排DOM元素

聖光之護

发布： 2025-08-08 16:02:14

原创

491人浏览过

使用JavaScript和jQuery按规则随机重排DOM元素

本教程详细介绍了如何利用JavaScript和jQuery，根据预设规则（如首个元素类型固定、不同类型元素交替出现）随机重排页面上的DIV元素。文章涵盖了元素分离、Fisher-Yates洗牌算法的应用，以及如何根据规则逐一将元素重新插入DOM，确保每次页面加载时呈现不同的布局，同时满足特定显示要求。

在网页开发中，有时我们需要动态调整页面元素的顺序，使其在每次加载时呈现不同的布局，同时又需要遵循特定的排列规则。本教程将详细讲解如何使用javascript和jquery来实现这一目标，特别是针对具有不同类型且需按特定模式交替排列的dom元素。

需求分析

假设我们有两类DIV元素：卡片（Card，共5个）和图片（Image，共4个）。我们需要实现以下重排规则：

第一个显示的DIV必须是卡片类型（C）。
后续的DIV应在图片（I）和卡片（C）之间交替出现，形成类似 C, I, C, I, C, I, C, I, C 的序列。
每种类型的DIV（卡片或图片）在各自的序列中应是随机选择的。

传统的数组洗牌算法（如Fisher-Yates）虽然能实现完全随机，但无法满足上述复杂的交替和首位规则。因此，我们需要一种更精细的控制策略。

核心策略

解决这类问题的核心策略可以分为以下几个步骤：

元素分离： 将不同类型的DOM元素从其父容器中移除，并分别存储到独立的数组中。
独立洗牌： 对每种类型的元素数组进行独立的随机洗牌，确保每种类型内部的顺序是随机的。
按规则重组： 遍历洗牌后的元素数组，根据预设的规则（如首位固定、交替插入）将元素逐一重新添加到DOM中。

实现步骤与代码示例

我们将使用jQuery来简化DOM操作，并实现Fisher-Yates洗牌算法。

立即学习“Java免费学习笔记（深入）”；

1. HTML结构准备

首先，确保你的HTML中包含需要重排的DIV元素，并为它们分配易于区分的ID或类名。例如，这里我们使用ID前缀来区分卡片和图片。

简篇AI排版

AI排版工具，上传图文素材，秒出专业效果！

554

查看详情

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>按规则随机重排DOM元素</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        body {
            font: medium monospace;
        }
        /* 示例样式，非核心功能 */
        .col-sm-12 { border: 1px solid #ccc; padding: 10px; margin-bottom: 5px; }
    </style>
</head>
<body>
    <div class="row" id="content">
        <div class="col-sm-12 col-md-6 col-lg-4" id="card1">Card #1</div>
        <div class="col-sm-12 col-md-6 col-lg-4" id="card2">Card #2</div>
        <div class="col-sm-12 col-md-6 col-lg-4" id="card3">Card #3</div>
        <div class="col-sm-12 col-md-6 col-lg-4" id="card4">Card #4</div>
        <div class="col-sm-12 col-md-6 col-lg-4" id="card5">Card #5</div>
        <div class="col-sm-12 col-md-6 col-lg-4" id="image1">Image #1</div>
        <div class="col-sm-12 col-md-6 col-lg-4" id="image2">Image #2</div>
        <div class="col-sm-12 col-md-6 col-lg-4" id="image3">Image #3</div>
        <div class="col-sm-12 col-md-6 col-lg-4" id="image4">Image #4</div>
    </div>
</body>
</html>

登录后复制

2. Fisher-Yates 洗牌算法

Fisher-Yates 洗牌算法是一种高效且公平的洗牌算法，它通过从数组末尾开始，每次随机选择一个未处理的元素与当前元素交换位置，直到数组开头。

/**
 * Fisher-Yates 洗牌算法
 * @param {Array} array - 需要洗牌的数组
 */
function shuffle(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1)); // 随机选择一个索引，范围从0到i
    // 交换 array[i] 和 array[j]
    const temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }
}

登录后复制

3. 元素提取、洗牌与重组

在DOM加载完成后，我们执行以下操作：

使用jQuery选择器 $("#content > [id^=card]") 和 $("#content > [id^=image]") 分别选中卡片和图片元素。
remove() 方法将这些元素从DOM中移除，但它们仍然存在于jQuery对象中。
get() 方法将jQuery对象转换为原生JavaScript数组，方便进行洗牌操作。
对两个数组分别调用 shuffle() 函数进行洗牌。
最后，根据规则循环将元素重新追加到父容器 #content 中。

$(function() { // 等待DOM加载完成
  // 1. 提取并移除DOM中的元素，转换为原生数组
  let cards = $("#content > [id^=card]").remove().get();
  let images = $("#content > [id^=image]").remove().get();

  // 2. 分别对卡片和图片数组进行洗牌
  shuffle(cards);
  shuffle(images);

  // 3. 根据规则重新组合并追加到DOM
  // 规则：第一个必须是C，然后C, I, C, I... 交替
  for (let i = 0; i < cards.length; i++) {
    // 首先添加一个卡片
    $("#content").append(cards[i]);

    // 如果还有图片，则添加一个图片，实现C-I交替
    if (i < images.length) {
      $("#content").append(images[i]);
    }
  }
});

登录后复制

完整代码示例

将上述JavaScript代码放入 <script> 标签中，并确保在jQuery库加载之后执行。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>按规则随机重排DOM元素</title>
    <!-- 引入jQuery库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        body {
            font: medium monospace;
        }
        /* 示例样式，非核心功能 */
        .col-sm-12 { border: 1px solid #ccc; padding: 10px; margin-bottom: 5px; }
    </style>
</head>
<body>
    <div class="row" id="content">
        <div class="col-sm-12 col-md-6 col-lg-4" id="card1">Card #1</div>
        <div class="col-sm-12 col-md-6 col-lg-4" id="card2">Card #2</div>
        <div class="col-sm-12 col-md-6 col-lg-4" id="card3">Card #3</div>
        <div class="col-sm-12 col-md-6 col-lg-4" id="card4">Card #4</div>
        <div class="col-sm-12 col-md-6 col-lg-4" id="card5">Card #5</div>
        <div class="col-sm-12 col-md-6 col-lg-4" id="image1">Image #1</div>
        <div class="col-sm-12 col-md-6 col-lg-4" id="image2">Image #2</div>
        <div class="col-sm-12 col-md-6 col-lg-4" id="image3">Image #3</div>
        <div class="col-sm-12 col-md-6 col-lg-4" id="image4">Image #4</div>
    </div>

    <script>
        /**
         * Fisher-Yates 洗牌算法
         * @param {Array} array - 需要洗牌的数组
         */
        function shuffle(array) {
          for (let i = array.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            const temp = array[i];
            array[i] = array[j];
            array[j] = temp;
          }
        }

        $(function() { // 等待DOM加载完成
          // 1. 提取并移除DOM中的元素，转换为原生数组
          let cards = $("#content > [id^=card]").remove().get();
          let images = $("#content > [id^=image]").remove().get();

          // 2. 分别对卡片和图片数组进行洗牌
          shuffle(cards);
          shuffle(images);

          // 3. 根据规则重新组合并追加到DOM
          // 规则：第一个必须是C，然后C, I, C, I... 交替
          for (let i = 0; i < cards.length; i++) {
            // 首先添加一个卡片
            $("#content").append(cards[i]);

            // 如果还有图片，则添加一个图片，实现C-I交替
            if (i < images.length) {
              $("#content").append(images[i]);
            }
          }
        });
    </script>
</body>
</html>

登录后复制

注意事项与总结

元素数量不匹配： 在本例中，卡片有5个，图片有4个。循环逻辑 for (let i = 0; i < cards.length; i++) 确保了所有卡片都会被添加。if (i < images.length) 则确保只有当还有图片时才添加图片。这意味着最终序列会是 C, I, C, I, C, I, C, I, C，最后一个卡片后面没有图片。如果两种元素数量相同，则会完美交替。如果图片数量多于卡片，则多余的图片将不会被添加，你需要根据具体需求调整循环逻辑。
性能考量： 对于少量元素，移除并重新添加DOM元素的操作性能影响不大。但如果需要处理成百上千个元素，频繁的DOM操作可能会导致性能问题。在这种情况下，可以考虑使用文档碎片（DocumentFragment）来批量操作DOM，或者更高级的虚拟DOM技术。
可扩展性： 如果有更多类型的元素或更复杂的规则，可以扩展这种分离-洗牌-重组的模式。例如，可以创建一个配置对象来定义不同类型的元素和它们的排列优先级。
无障碍性（Accessibility）： 动态改变DOM顺序可能会影响屏幕阅读器等辅助技术的阅读顺序。确保你的动态布局不会对依赖顺序的用户造成困扰，必要时提供替代方案或使用ARIA属性进行辅助。

通过以上方法，我们成功地实现了在满足特定排列规则的同时，对DOM元素进行随机重排的功能，这在构建动态和个性化的网页布局时非常有用。

以上就是使用JavaScript和jQuery按规则随机重排DOM元素的详细内容，更多请关注php中文网其它相关文章！