如何使用JavaScript随机重新排列DIV？

Question

我试图在页面加载时显示一些 DIV，并且每次显示它们的顺序都是随机的，但并不完全是随机的，因为我希望它们遵守一些规则。

有两种不同类型的 DIV：

1. 卡片 x5 (C)
2. 图像 x4 (I)

规则应该如下：

1. 第一个 DIV 必须始终是 C 类型
2. 其余的 DIV 应该在 I 和 C 之间交替出现 (例如：C, I, C, I, C, I, C, I, C)
3. 所有的 DIV 应该从它们各自的类型中随机选择

我尝试了使用 jQuery 进行数组洗牌，采用另一个问题的解决方案（如下所示），但那只会将 DIVs 随机排序，并没有考虑规则 1 和 2。

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>

如果有任何建议或帮助可以指引我朝着正确的方向前进，我将永远感激不尽。

- whiteknight26

Answer 1

粗略的想法是从 DOM 中移除元素，对它们进行洗牌，然后将它们附加到原始父元素中：

function shuffle(array) {
  // Fisher-Yates shuffle
  for (let i = array.length - 1; i > 0; i--) {
    let j = Math.floor(Math.random() * (i + 1));
    let temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }
}
$(function() {
  let cards = $("#content > [id^=card]").remove().get();
  let images = $("#content > [id^=image]").remove().get();
  shuffle(cards);
  shuffle(images);
  for (let i = 0; i < cards.length; i++) {
    $("#content").append(cards[i]);
    if (i < images.length) {
      $("#content").append(images[i]);
    }
  }
});

body {
  font: medium monospace;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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>

- Salman A

---

这个非常好用，正是我所需要的。非常感谢您的帮助 - 而且速度也非常快！ - whiteknight26

Answer 2

这里有一个非jQuery的例子。它可以随机洗牌卡片和图片，并按照您想要的模式重新附加它们。不需要删除元素，因为元素已经通过append操作移动了。

顺便说一下：在您的HTML中缺少div#image5...

const shuffle = array => {
  const swap = (i1, i2) => [array[i1], array[i2]] = [array[i2], array[i1]];
  return (Array(array.length).fill(0)
    .forEach( (_, i) => swap(i, Math.floor(Math.random() * (i + 1)))), array);
};

const content = document.querySelector(`#content`);
const cards = shuffle([...content.querySelectorAll(`[id^=card]`)]);
const images = shuffle([...content.querySelectorAll(`[id^=image]`)]);
cards.forEach( (card, i) => content.append(card, images[i] ?? ``) );

body {
  font: medium monospace;
}

[id^="image"] {
  margin-left: 5px;
}

<div class="row" id="content">
  <div id="card1">Card #1</div>
  <div id="card2">Card #2</div>
  <div id="card3">Card #3</div>
  <div id="card4">Card #4</div>
  <div id="card5">Card #5</div>
  <div id="image1">Image #1</div>
  <div id="image2">Image #2</div>
  <div id="image3">Image #3</div>
  <div id="image4">Image #4</div>
</div>

- KooiInc