0

Fala galera!

Tenho o seguinte código. O que estou tentando é que apareça as 6 divs aleatoriamente. Já tentei de diversar formas mas sem resultado.

Se alguém puder ajudar agradeço.

PS: Não posso colocar as divs dentro do HTML, tem que ser via jquery.

var dfl1 = '<div class="col-xs-6 thumb">teste 1</div>'
var dfl2 = '<div class="col-xs-6 thumb">teste 2</div>'
var dfl3 = '<div class="col-xs-6 thumb">teste 3</div>'
var dfl4 = '<div class="col-xs-6 thumb">teste 4</div>'
var dfl5 = '<div class="col-xs-6 thumb">teste 5</div>'
var dfl6 = '<div class="col-xs-6 thumb">teste 6</div>'
		
var imagesdfl = [dfl1, dfl2, dfl3, dfl4, dfl5, dfl6];
$(imagesdfl[Math.floor(Math.random() * imagesdfl.length)]).appendTo('#load-content-d');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="load-content-d" class="row thumbs gap-xs">
													
</div>

1 Resposta 1

0

Utilizando a lib lodash, bastaria fazer o sort dinâmico com o comando shuffle. Veja abaixo como ficaria:

var dfl1 = $('<div class="col-xs-6 thumb">teste 1</div>');
var dfl2 = $('<div class="col-xs-6 thumb">teste 2</div>');
var dfl3 = $('<div class="col-xs-6 thumb">teste 3</div>');
var dfl4 = $('<div class="col-xs-6 thumb">teste 4</div>');
var dfl5 = $('<div class="col-xs-6 thumb">teste 5</div>');
var dfl6 = $('<div class="col-xs-6 thumb">teste 6</div>');

var arr = [];
arr.push(dfl1, dfl2, dfl3, dfl4, dfl5, dfl6);
arr = _.shuffle(arr);

$("#load-content-d").html(arr);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>


<div id="load-content-d" class="row thumbs gap-xs"></div>

Com Java Script puro: Código do sortear retirado daqui.

function shuffle(array) {
  var currentIndex = array.length,
    temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

var dfl1 = $('<div class="col-xs-6 thumb">teste 1</div>');
var dfl2 = $('<div class="col-xs-6 thumb">teste 2</div>');
var dfl3 = $('<div class="col-xs-6 thumb">teste 3</div>');
var dfl4 = $('<div class="col-xs-6 thumb">teste 4</div>');
var dfl5 = $('<div class="col-xs-6 thumb">teste 5</div>');
var dfl6 = $('<div class="col-xs-6 thumb">teste 6</div>');

var arr = [];
arr.push(dfl1, dfl2, dfl3, dfl4, dfl5, dfl6);
arr = shuffle(arr);

$("#load-content-d").html(arr);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>


<div id="load-content-d" class="row thumbs gap-xs"></div>

5
  • Obrigado pela dica Bruno! Interessante essa lib, mas será que não tem outro método que não tenha que usar outras libs?
    – Eduardo
    Commented 28/07/2017 às 20:44
  • Coloquei um exemplo com javascript puro. Commented 28/07/2017 às 20:48
  • Muito obrigado Bruno!
    – Eduardo
    Commented 28/07/2017 às 20:52
  • Eduardo, se foi resolvido, marque minha resposta como aceita para seu problema. ;) Um bom fim de semana pra ti! Commented 28/07/2017 às 20:53
  • Valeu Bruno! Bom final de semana pra você também.
    – Eduardo
    Commented 28/07/2017 às 21:12

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .