title: How to display divs in random order with packery.js
body: <p>I have a packery.js layout of divs of three different sizes. I would like them to appear in random order every time the page loads but so far I can only get the content inside the divs to randomize. So on refresh I get the divs in the same order/pattern but the content inside in a different order.</p>
  
  <p>Here's the basic HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="grid"&gt;
      &lt;div class="grid-item grid-item--height2"&gt;
        &lt;div class="grid-item-content"&gt;
          &lt;p&gt;content here&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="grid-item grid-item--width2"&gt;
        &lt;div class="grid-item-content"&gt;
          &lt;p&gt;content here&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="grid-item"&gt;
        &lt;div class="grid-item-content"&gt;
          &lt;p&gt;content here&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's my CSS:</p>
  
  <pre><code>.grid {
    width: 100vw;
  }
  
  /* clear fix */
  .grid:after {
    content: '';
    display: block;
    clear: both;
  }
  
  /* ---- .grid-item ---- */
  
  .grid-item {
    float: left;
    width: 120px;
    height: 120px;
    background: #ffffff;
    border: 2px solid hsla(0, 0%, 0%, 0.5);
  }
  
  .grid-item:hover {
    cursor: pointer;
  }
  
  .grid-item--width2 { width: 240px; }
  .grid-item--height2 { height: 240px; }
  
  .grid-item--large {
    width: 480px;
    height: 300px;
    background-color: slategrey;
  }
  </code></pre>
  
  <p>&amp; my Javascript:</p>
  
  <pre><code>var $grid = $('.grid').packery({
    itemSelector: '.grid-item'
  });
  
  $grid.on( 'click', '.grid-item', function( event ) {
    // change size of item by toggling large class
    $(  event.currentTarget  ).toggleClass('grid-item--large');
    // trigger layout after item size changes
    $grid.packery('layout');
  });
  
    (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 &lt; elems.length; i++)
                    unsortedElems.eq(i).replaceWith(elems[i]);
                });    
              };
  
            })(jQuery);
  
            $(document).ready(function() {
                $(".container").css("display", "block");
                $("div.grid").randomize("div.grid-item");
            });
  </code></pre>
  
  <p>I don't know if I'm just putting the js in the wrong order or something but I can't figure it out - I would really appreciate a push in the right direction!</p>
  
  <p>Thank you.</p>