How to display divs in random order with packery.js

Question

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.

Here's the basic HTML:

<div class="container">
  <div class="grid">
    <div class="grid-item grid-item--height2">
      <div class="grid-item-content">
        <p>content here</p>
      </div>
    </div>
    <div class="grid-item grid-item--width2">
      <div class="grid-item-content">
        <p>content here</p>
      </div>
    </div>
    <div class="grid-item">
      <div class="grid-item-content">
        <p>content here</p>
      </div>
    </div>
  </div>
</div>

Here's my CSS:

.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;
}

& my Javascript:

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 < elems.length; i++)
                  unsortedElems.eq(i).replaceWith(elems[i]);
              });    
            };

          })(jQuery);

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

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!

Thank you.

Answer 1

The reason of only content being rendomized is because you are sorting children nodes of div.grid-item instead of children of div.grid

Second, i think packery is adding absolute positioning to the grid-item nodes. So fixing js code would not reflect the correct positioning unless

position: relative !important;
left: 0 !important;
top: 0 !important;

is added to .grid-item class.

Created a pen for this. https://codepen.io/11kodykay11/pen/xxwVOra

Answer 2

So I figured it out, in case anyone is wondering.

The HTML (the inline CSS is just to illustrate that the divs randomize in order, not just the content):

<div class="container">
  <div class="grid">

    <div class="grid-item">
      <div style="background-color: red;" class="grid-item-content expand">
        <p>content here #1</p>
      </div>
    </div>

    <div class="grid-item">
      <div style="background-color: blue;" class="grid-item-content expand">
        <p>content here #2</p>
      </div>
    </div>

    <div class="grid-item">
      <div style="background-color: green;" class="grid-item-content expand">
        <p>content here #3</p>
      </div>
    </div>

    <div class="grid-item">
      <div style="background-color: yellow;" class="grid-item-content expand">
        <p>content here #4</p>
      </div>
    </div>

    <div class="grid-item">
      <div style="background-color: orange;" class="grid-item-content expand">
        <p>content here #5</p>
      </div>
    </div>

    <div class="grid-item">
      <div style="background-color: purple;" class="grid-item-content expand">
        <p>content here #6</p>
      </div>
    </div>

  </div>
</div>

The CSS:

.expand {
  display: block;
  width: 150px;
  height: 150px;
}

.expand:hover {
  cursor: pointer;
}

.grid-item-content {
  width: 150px;
  height: 150px;
  border: 1px solid black;
}

.grid-item--large {
  width: 520px;
  height: 375px;
}

& the JS:

$(document).ready(function () {
  var $grid = $(".grid").packery({
    itemSelector: ".grid-item"
  });

  $grid.on("click", ".expand", function (event) {
    $(event.currentTarget).toggleClass("grid-item--large");
    $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 < elems.length; i++)
        unsortedElems.eq(i).replaceWith(elems[i]);
    });
  };
})(jQuery);

$("div.grid").randomize("div.grid-item");

Codepen link: https://codepen.io/ddmmyyyy/pen/OJyQmQz