Randomizing elementos em uma matriz?

Question

Eu criei um site para um artista amigo meu, e ela quer o layout para permanecer o mesmo, mas ela também quer novas pinturas que ela tinha produzido para ser misturado no layout atual. Então, eu tenho 12 miniaturas (thumb1 - thumb12) na página principal da galeria e 18 imagens (IMG1 - img18) ao local assim

A abordagem que eu pensei foi criar uma matriz de todas as imagens, embaralhar-lo, em seguida, basta raspar a primeira 12 e carregá-los nos slots polegar. Outra abordagem seria para selecionar 12 imagens aleatoriamente a partir da matriz. No primeiro caso, eu não consigo encontrar uma maneira de embaralhar os elementos de um array. Neste último caso, não posso quebrar meu cérebro em torno de como manter as imagens de carregamento mais de uma vez, além de usar um segundo conjunto, que parece muito ineficiente e assustador.

Eu estou fazendo tudo isso em Javascript, pelo caminho.

Answer 1

Eu escrevi isso há um tempo atrás e acontece para caber o que você está procurando. Eu acredito que é o shuffle Fisher-Yates que ojblass refere-se 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
};

Observe que modificar Array.prototype pode ser considerado uma forma ruim. Você pode querer implementar isso como um método independente que leva a matriz como um argumento. De qualquer forma, para terminá-lo:

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

Ou, se você não quer realmente modificar o original:

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

Answer 2

Você deve implementar o Fisher-Yates shuffle (também conhecido como o shuffle Knuth ).

Olhe para a grande resposta dada aqui .

Answer 3

Sua primeira abordagem iria funcionar. Apenas embaralhar as 18 elementos e tomar a primeira 12.

Answer 4

Recentemente, deparei com esse problema sozinho. O post aqui ajudou: http://waseemsakka.com/2012/02/14/javascript-dropping-the-last-parts-of-an-array-and-randomizing-the-order-of -um-array / .

Basicamente, começar por randomização sua matriz:

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

Isto irá embaralhar a ordem de seus 18 elementos. Então, para manter apenas os primeiros 12 elementos, você teria apenas deixar cair a última 6:

thumbs.length = 12;