【问题标题】：Implementing shuffle images function实现洗牌图像功能
【发布时间】：2012-03-10 02:40:29
【问题描述】：

我正在寻找一些关于如何启动随机图像功能的建议，所以我在一个 div 框中有 6 个图像 atm，我想要一个允许它们随机播放的函数，我应该如何开始？我也应该将图像放在单独的 div 中吗？感谢任何帮助或示例代码，谢谢

【问题讨论】：

【解决方案1】：

以下是一个 jQuery 解决方案。您可以使用 vanilla JavaScript 获得相同的结果，但需要几行额外的代码。

<div id="deck">
  <div><img src="" /></div>
  <div><img src="" /></div>
  .
  .
  .
</div>

// Fisher–Yates Shuffle (Knuth variant)
// To shuffle an array a of n elements (indices 0..n-1):
//   for i from n - 1 downto 1 do
//        j <- random integer with 0 <= j <= i
//        exchange a[j] and a[i]

// jQuery specific:
// 1) remove elements from DOM and convert them into a native JavaScript array
// 2) apply algorithm
// 3) inject the array back to DOM

var a = $("#deck > div").remove().toArray();
for (var i = a.length - 1; i >= 1; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var bi = a[i];
    var bj = a[j];
    a[i] = bj;
    a[j] = bi;
}
$("#deck").append(a);

Demo here

【讨论】：

Salman A，感谢它，它工作得很好，但是我已经稍微更改了代码，不知道如何更改随机播放功能，因为它不再起作用了，你能帮忙吗？ jsfiddle.net/kommandoss/YuRpU/38

【解决方案2】：

我已经为a memory card game 实现了类似的功能，因此您可能可以从中得到一些提示。只需在我的 .js 文件中搜索“shuffle”的资源，您就会知道我是如何做到的。根据记忆，我最初将所有图像放在一个 div 中，然后使用 shuffle 功能移动它们。我想后来我开始改组 URL 数组，而不是稍后生成图像元素。

我使用了 Ca-Phun Ung 的“Shuffle”JQuery 插件（尽管我认为我重新编写了自己的版本以更好地了解其内部工作原理）。您也可以找到一些有用的信息。见JQuery Shuffle

【讨论】：

【解决方案3】：

好的，我知道了！

var divs = $('selector to get all divs'); // This could be $('img');

function shuffle(divs, iterations) {
   var size = divs.size();

   for(var i = iterations; i > 0; i--) {
      // Pick two divs at random
      var div1 = divs[Math.floor(Math.random() * size)],
          div2 = divs[Math.floor(Math.random() * size)];

      // Ensure they are different divs
      if(div1.is(div2)) {
         continue;
      }

      // Swap the two divs
      div1.clone().insertAfter(div2);
      div2.detach().insertAfter(div1);
      div1.detach();
   }
};

shuffle(divs, 1000);

虽然这可能会更好，如果你放置一个 divs.hide()，然后放置一个 divs.show()，这样你就不会看到抖动。然而，也许这就是你想要的？可能你想在那里延迟并使用jQuery的动画功能让它变得花哨。这个特定的解决方案要求 img 在 DOM 中的位置确定位置。更复杂的解决方案是在循环期间交换 css 位置。

var savedLeft = div1.css("left"),
    savedTop = div1.css("top");

div1.css("left", div2.css("left"));
div1.css("top", div2.css("top"));
div2.css("left", savedLeft);
div2.css("top", savedTop);

我还没有真正尝试过，但从这里看起来就对了：P

【讨论】：