使用Javascript或Jquery

时间:2016-07-19 15:27:08

标签: javascript jquery sorting random shuffle

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

enter image description here

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

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

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

1 个答案:

答案 0 :(得分:0)

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

一般随机播放算法:

  1. 查找要重新排列的项目列表。
  2. 从要重新排列的项目中删除随机元素
  3. 将元素插入新列表
  4. 重复步骤1-3,直到原始列表中没有剩余项目
  5. 代码示例

    这是一个应该做的技巧:

    $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/

    有一个完整的工作版本

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