La randomisation des éléments dans un tableau?

Question

J'ai créé un site pour une amie artiste et elle souhaite que la mise en page reste la même, mais elle souhaite également que les nouvelles peintures qu'elle a produites soient mélangées à la mise en page actuelle. J'ai donc 12 vignettes (thumb1 - thumb12) sur la page principale de la galerie et 18 images (img1 - img18) à placer également

L’approche à laquelle je pensais était de créer un tableau de toutes les images, de les randomiser, puis de simplement gratter les 12 premières images et de les charger dans les fentes pour les pouces. Une autre approche serait de sélectionner 12 images au hasard dans la matrice. Dans le premier cas, je ne peux pas trouver un moyen de randomiser les éléments d'un tableau. Dans ce dernier cas, je ne sais pas comment empêcher les images de se charger plus d'une fois, si ce n'est d'utiliser un second tableau, ce qui semble très inefficace et effrayant.

Au fait, je fais tout cela en Javascript.

Answer 1

Je l'ai écrit il y a quelque temps et il se trouve qu'il correspond à ce que vous recherchez. Je crois que c’est le shuffle Fisher-Yates auquel se réfère ojblass:

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
};

Notez que la modification de Array.prototype peut être considérée comme une mauvaise forme. Vous voudrez peut-être l'implémenter en tant que méthode autonome prenant le tableau en argument. Quoi qu'il en soit, pour terminer:

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

Ou, si vous ne souhaitez pas modifier l'original:

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

Answer 2

Vous devez implémenter le shuffle de Fisher-Yates (autrement dit le shuffle de Knuth). ).

Regardez l'excellente réponse fournie ici .

Answer 3

Votre première approche fonctionnerait. Il suffit de mélanger les 18 éléments et de prendre les 12 premiers.

Answer 4

Je suis récemment tombé sur ce problème moi-même. Le message ici a aidé: http://waseemsakka.com/2012/02/14/javascript-dropping-the-last-parts-of-an-array-and-randomizing-the-order-of -an-array / .

En gros, commencez par randomiser votre tableau:

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

Ceci randomisera l’ordre de vos 18 éléments. Ensuite, pour ne conserver que les 12 premiers éléments, il vous suffira de laisser tomber les 6 derniers:

thumbs.length = 12;