Masonry - How to shuffle items

Question

I'm using the masonry script for one of my webpages.

This is the JS (using jQuery, Typescript and the ImagesLoaded Plugin):

$(function(){
    // or with jQuery
    var $container;

    function triggerMasonry() {
      // don't proceed if $container has not been selected
      if ( !$container ) {
        return;
      }
      // init Masonry
        $container.imagesLoaded( function() {
            $container.masonry({ 
                itemSelector : '.item',
                stamp: '.stamp',
                gutter:20
            });
        });
    }
    // trigger masonry on document ready
    $(function(){
      $container = $('#container');
      triggerMasonry();
    });
    // trigger masonry when fonts have loaded
    Typekit.load({
      active: triggerMasonry,
      inactive: triggerMasonry
    });
});  

This is working very good.
But now I need to shuffle the items before they are rendered and displayed my masonry. Is this somehow possible?
I tried to use Isotope and looked at packery but both doesn't worked out at my website.

Thank you for every help!

Answer 1

shuffle the items before they are rendered and displayed

Do the items have any JavaScript event listeners assigned to them. If not (meaning if the 'container' only contains markup and no script dependency) then I would suggest:

1. creating an array that stores the markup of each individual masonry-item as HTML string.
2. Shuffle the array and
3. dump the array contents into the 'container'

A crude solution for sure. But, hope this gets the job done.