随机化数组中的元素?

时间:2009-05-02 01:34:22

标签: javascript algorithm arrays shuffle

我为我的艺术家朋友创建了一个网站,她希望布局保持不变,但她也希望将自己制作的新画作混合到当前版面中。所以我在主画廊页面上有12个缩略图(thumb1 - thumb12),还有18个图像(img1 - img18)也可以放置

我想到的方法是创建一个包含所有图像的数组,随机化它,然后简单地刮掉前12个并将它们加载到拇指槽中。另一种方法是从阵列中随机选择12个图像。在第一种情况下,我找不到一种随机化数组元素的方法。在后一种情况下,除了使用第二个数组之外,我无法将我的大脑包围在如何保持图像加载不止一次,这看起来非常低效和可怕。

顺便说一句,我在Javascript中正在做所有这些。

4 个答案:

答案 0 :(得分:18)

我刚刚写了这篇文章,它恰好适合你想要的东西。我相信这是ojblass所指的Fisher-Yates shuffle:

Array.prototype.shuffle = function() {
   var i = this.length;
   while (--i) {
      var j = Math.floor(Math.random() * (i + 1))
      var temp = this[i];
      this[i] = this[j];
      this[j] = temp;
   }

   return this; // for convenience, in case we want a reference to the array
};

请注意,修改Array.prototype可能被视为错误形式。您可能希望将此实现为将数组作为参数的独立方法。无论如何,要完成它:

var randomSubset = originalArray.shuffle().slice(0,13);

或者,如果您不想实际修改原始文件:

var randomSubset = originalArray.slice(0).shuffle().slice(0,13);

答案 1 :(得分:6)

你应该实现Fisher-Yates shuffle(也称为Knuth shuffle)。

查看提供的最佳答案here

答案 2 :(得分:1)

你的第一种方法是有效的。只需将18个元素洗牌,然后选择前12个元素。

答案 3 :(得分:1)

我最近自己遇到过这个问题。这里的帖子帮助:http://waseemsakka.com/2012/02/14/javascript-dropping-the-last-parts-of-an-array-and-randomizing-the-order-of-an-array/

基本上,首先要随机化你的数组:

thumbs.sort(function(a, b) {
     return Math.random() - 0.5;
})

这将随机化您的18个元素的顺序。然后只保留前12个元素,你只需删除最后6个元素:

thumbs.length = 12;