Shuffle Random Div Containers

Shuffle lots of empty div containers around on page when it loads

by Ryan Archer

HTML

<div class="container">
<div class="band">
      <div class="member red"></div>
      <div class="member red"></div>
      <div class="member red"></div>
      <div class="member red"></div>
      <div class="member red"></div>
      <div class="member red"></div>
      <div class="member red"></div>
      <div class="member red"></div>
      <div class="member red"></div>
      <div class="member red"></div>
      <div class="member red"></div>
      <div class="member blue"></div>
      <div class="member blue"></div>
      <div class="member blue"></div>
      <div class="member blue"></div>
      <div class="member blue"></div>
      <div class="member blue"></div>
      <div class="member blue"></div>
      <div class="member blue"></div>
      <div class="member blue"></div>
      <div class="member blue"></div>
      <div class="member green"></div>
      <div class="member green"></div>
      <div class="member green"></div>
      <div class="member green"></div>
      <div class="member green"></div>
      <div class="member green"></div>
      <div class="member green"></div>
      <div class="member green"></div>
      <div class="member green"></div>
      <div class="member green"></div>
      <div class="member purple"></div>
      <div class="member purple"></div>
      <div class="member purple"></div>
      <div class="member purple"></div>
      <div class="member purple"></div>
      <div class="member purple"></div>
      <div class="member purple"></div>
      <div class="member purple"></div>
      <div class="member purple"></div>
</div>
</div>
<button>Randomize</button>

CSS

body { font-family: helvetica, arial, verdana }

.container { display: none; }

.member { 
  padding: 5px; 
  background: #ccc; 
  margin: 5px; 
  display: inline-block;
  width: 100px;
  height: 100px;
}

ul li { list-style-type: none; }
ul { padding-left: 15px; }

.red { background: crimson }
.blue { background: skyblue }
.green { background: green }
.purple { background: rebeccapurple }

JavaScript

(function($) {
  
  $.fn.randomize = function(tree, childElem) {
    return this.each(function() {
      var $this = $(this);
      if (tree) $this = $(this).find(tree);
      var unsortedElems = $this.children(childElem);
      var elems = unsortedElems.clone();
      
      elems.sort(function() { return (Math.round(Math.random())-0.5); });  

      for(var i=0; i < elems.length; i++)
        unsortedElems.eq(i).replaceWith(elems[i]);
    });    
  };

})(jQuery);

$(document).ready(function() {
		$(".container").css("display", "block");
		$("div.container").randomize("div.band");
});

$('button').click(function() {
  //$("div.band").randomize("div.member");
  $("div.container").randomize("div.band");
});