如何用JavaScript按规则随机重排DIV元素

需求说明 #

现有5个Card（C）类型和4个Image（I）类型的DIV，页面加载时需要按以下规则随机排列：

• 第一个元素必须是C类型
• 剩余元素需在I和C之间交替排列（示例顺序：C,I,C,I,C,I,C,I,C）
• 每种类型内的元素需随机选取

之前使用的全局洗牌方法只能实现完全随机，无法满足上述规则，以下是具体解决思路和代码实现。

原代码示例 #

var $cont = $('#content');
var itemsArr = $cont.children().get();

$cont.append(shuffle(itemsArr));

function shuffle(a) {
  var j, x, i;
  for (i = a.length; i; i--) {
    j = Math.floor(Math.random() * i);
    x = a[i - 1];
    a[i - 1] = a[j];
    a[j] = x;
  }
  return a;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

解决思路与修改后代码 #

核心思路是先将两种类型的元素分离，各自洗牌后再按规则合并：

1. 筛选并分离Card和Image元素
2. 分别对两个数组进行随机洗牌
3. 按照C→I→C→I的交替规则合并数组（因为Card数量多1个，最后以Card结尾）
4. 将合并后的元素重新添加到容器中

修改后的代码：

var $cont = $('#content');

// 分离Card和Image元素（也可改用类名区分，更灵活）
var $cards = $cont.children('[id^="card"]').get();
var $images = $cont.children('[id^="image"]').get();

// 复用洗牌函数
function shuffle(a) {
  var j, x, i;
  for (i = a.length; i; i--) {
    j = Math.floor(Math.random() * i);
    x = a[i - 1];
    a[i - 1] = a[j];
    a[j] = x;
  }
  return a;
}

// 分别对两类元素洗牌
var shuffledCards = shuffle($cards);
var shuffledImages = shuffle($images);

// 按规则合并数组
var resultArr = [];
for (var i = 0; i < shuffledImages.length; i++) {
  resultArr.push(shuffledCards[i]);
  resultArr.push(shuffledImages[i]);
}
// 补上最后一个Card（因Card比Image多1个）
resultArr.push(shuffledCards[shuffledCards.length - 1]);

// 更新容器内的元素顺序
$cont.empty().append(resultArr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

关键说明 #

• 元素分离可改用类名实现（比如给Card加card类、Image加image类，选择器改为.card和.image），比按ID前缀筛选更灵活易维护
• 洗牌逻辑保持不变，可复用在不同数组的随机排序中
• 合并逻辑精准匹配Card和Image的数量差，确保最终顺序完全符合规则

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