使用Javascript或Jquery

Question

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

我不需要帮助HTML布局也不需要CSS设计本身，而是如何使用本机Javascript或jQuery创建onclick函数以便“shuffle”和“sort” “按钮工作。如果可能的话，最好是Jquery，因为我对它的语法更加熟悉。

我事先感谢所有人的帮助和支持。我非常感谢任何有用的链接供我自己研究。

我并不是在寻找其他人为我做我的工作，虽然解决方案受到高度赞赏，但也许会以伪代码的方式指导我。

Answer 1

您可以使用许多不同的算法来随机播放＆＃34;物品清单。但是，我最喜欢的方法之一是以下因为它非常简洁。

一般随机播放算法：

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/

有一个完整的工作版本

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