使用 Javascript 或 Jquery 随机重新排列 div

Question

我有一个使用 div 的 3x3 网格布局，单击按钮后我需要 div 随机重新排列。以下链接说明了我需要创建的内容。

我不需要 HTML 布局或 CSS 设计本身的帮助，而是如何使用本机 Javascript 或 jQuery 创建 onclick 函数以便“随机播放”和“排序”按钮去工作。如果可能的话，最好是 Jquery，因为我更喜欢它的语法。

我提前感谢大家的帮助和支持。非常感谢任何对我自己的研究有用的链接。

我不是在寻找其他人来为我做我的工作，尽管我们非常感谢解决方案，但也许会以一种伪代码的方式指导我。

Answer 1

您可以使用多种不同的算法来“打乱”项目列表。但是，我最喜欢的方法之一是以下，因为它非常简洁。

通用洗牌算法：

1. 查找要重新排列的项目列表。
2. 从要重新排列的项目中移除随机元素
3. 将元素插入新列表
4. 重复步骤 1-3，直到原始列表中没有其他项目

代码示例

这是一个可以解决问题的函数：

$container = $("#container");
$divList = $("div");

$("#shuffle").on("click", function(){
  //copy and remove all divs
  $divCopy = $divList.clone(true);
  $("div").remove();

  while($divCopy.length > 0){
    //chose random index of div array
    var randomIndex = Math.floor(Math.random() * $divList.length);

    $container.append($divCopy.splice(randomIndex, 1));
  }
});

https://jsfiddle.net/oruq1qou/ 有完整的工作版本

如果您有兴趣寻找解决此问题的其他方法，我建议您阅读一下不同类型的随机播放算法。