Reply To: Display grid of posts randomly

[Ryan]

Thanks, that helped out heaps. I will have to keep that in mind – i think that was the issue I was having with the GTM code on another support post.

Anyhow, I got it working in this demo site http://blogname.coolwebs.com.au/
Obviously have to work on it some more. I have to change the code every time I choose between masonry and grid for the blogs as GP inserts another container div above the article elements.

<script>

(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);

jQuery(document).ready(function() {
                console.log('random shuffle')
		jQuery("body").css("display", "block");
		jQuery("div.content-area").randomize("div.masonry-container");
});

</script>

I think I find this a bit easier than trying to integrate a library such as isotope (with shuffle) when you already have masonry. Less (lib) code is better 😉