Randomizzazione di elementi in un array?

Question

Ho creato un sito per un mio amico artista e lei vuole che il layout rimanga uguale, ma vuole anche che i nuovi dipinti che ha prodotto siano stati mixati nel layout corrente. Quindi ho 12 miniature (thumb1 - thumb12) sulla pagina della galleria principale e 18 immagini (img1 - img18) da inserire anche

L'approccio che ho pensato è stato quello di creare un array di tutte le immagini, randomizzarlo, quindi semplicemente raschia via i primi 12 e caricali nelle apposite aperture. Un altro approccio sarebbe quello di selezionare 12 immagini in modo casuale dalla matrice. Nel primo caso, non riesco a trovare un modo per randomizzare gli elementi di un array. In quest'ultimo caso, non posso avvolgere il mio cervello su 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, a proposito.

Answer 1

Ho scritto un po 'di tempo fa e così capita di adattarsi a ciò che stai cercando. Credo che sia la Fisher-Yates Shuffle che ojblass si riferisce a:

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

Si noti che la modifica Array.prototype può essere considerato di cattivo gusto. Si potrebbe voler implementare questo come un metodo standalone che prende l'array come argomento. In ogni caso, per finirlo:

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

Oppure, se non si desidera modificare in realtà l'originale:

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

Answer 2

È necessario implementare lo Fisher-Yates shuffle (altrimenti noto come Knuth shuffle).

Guarda l'ottima risposta fornita here.

Answer 3

Il tuo primo approccio funzionerebbe. Basta mescolare i 18 elementi e prendere il primo 12.

Answer 4

Recentemente ho trovato questo problema io stesso. 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, iniziare rendendo casuale la matrice:

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

Ciò casuale l'ordine dei 18 elementi. Quindi per mantenere solo i primi 12 elementi, si sarebbe solo cadere l'ultimo 6:

thumbs.length = 12;