Randomize Ivivs jQuery

Question

Fala galera!

I have the following code. What I’m trying to do is to randomly appear the 6 Ivs. I’ve tried to cross shapes but without result.

If anyone can help, thank you.

PS: I cannot put the Divs inside the HTML, it has to be 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>

Answer 1

Using the lib lodash, simply do the dynamic Sort with the command shuffle. See below how it would look:

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>

With pure Java Script: Code of drawn draw from here.

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>