Randomizzare gli elementi in un array?

Question

Ho creato un sito per un mio amico amico, e lei vuole che il layout rimanga lo stesso, ma vuole anche che i nuovi dipinti che ha prodotto siano mescolati al layout attuale. Quindi ho 12 miniature (thumb1 - thumb12) sulla pagina principale della galleria e 18 immagini (img1 - img18) da posizionare anche

L'approccio che ho pensato è stato quello di creare un array di tutte le immagini, randomizzarle, quindi semplicemente raschiare i primi 12 e caricarli nelle fessure per i pollici. Un altro approccio sarebbe quello di selezionare 12 immagini a caso dall'array. Nel primo caso, non riesco a trovare un modo per randomizzare gli elementi di un array. In quest'ultimo caso, non riesco a capire come impedire il caricamento delle immagini più di una volta, a parte l'utilizzo di un secondo array, che sembra molto inefficiente e spaventoso.

Sto facendo tutto questo in Javascript, comunque.

Answer 1

L'ho scritto un po 'di tempo fa e capita che corrisponda a quello che stai cercando. Credo che sia lo shuffle Fisher-Yates a cui si riferisce 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
};

Notare che la modifica di Array.prototype può essere considerata una cattiva forma. È possibile che si desideri implementarlo come metodo autonomo che utilizza l'array come argomento. Ad ogni modo, per finirlo:

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

Oppure, se non si desidera effettivamente modificare l'originale:

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

Answer 2

Dovresti implementare Fisher-Yates shuffle (altrimenti noto come Knuth shuffle ).

Guarda l'ottima risposta fornita qui .

Answer 3

Il tuo primo approccio funzionerebbe. Mescola i 18 elementi e prendi i primi 12.

Answer 4

Di recente ho riscontrato questo problema da solo. Il post qui ha aiutato: http://waseemsakka.com/2012/02/14/javascript-dropping-the-last-parts-of-an-array-and-randomizing-the-order-of -an-array / .

Fondamentalmente, inizia randomizzando il tuo array:

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

Questo randomizzerà l'ordine dei tuoi 18 elementi. Quindi per mantenere solo i primi 12 elementi, dovresti semplicemente rilasciare gli ultimi 6:

thumbs.length = 12;