How to stagger image load on page load in isotope gallery?

Does anyone know how to have an isotope gallery stagger its image loading upon first page load?

Ideally it would look something like this:

http://pexetothemes.com/demos/expression_wp/

I feel like it’s something to do with adding a “stagger” line into the code, but if that’s indeed how to do what I’d like to do, I just don’t have any idea where to actually put that piece of code.

Here’s what I’ve got so far:

http://kristinepaulsenphotography.webflow.io/editorial/editorial-photo-stories

And my custom code looks like this:

<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js></script>

<script>
$(document).ready( function() {
  // init Isotope
  var $grid = $('.grid').isotope({
    filter: '.jamesleeburke',
    itemSelector: '.item',
    stagger: 90
  });

   // layout Isotope after each image loads
  $grid.imagesLoaded().progress( function() {
    $grid.isotope('layout');
  }); 

  // store filter for each group
  var filters = {};

  $('.filters').on( 'click', '.button', function() {
    var $this = $(this);
    // get group key
    var $buttonGroup = $this.parents('.button-group');
    var filterGroup = $buttonGroup.attr('data-filter-group');
    // set filter for group
    filters[ filterGroup ] = $this.attr('data-filter');
    // combine filters
    var filterValue = concatValues( filters );
    // set filter for Isotope
    $grid.isotope({ filter: filterValue });
   });

  // change is-checked class on buttons
  $('.button-group').each( function( i, buttonGroup ) {
    var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
  $buttonGroup.find('.is-checked').removeClass('is-checked');
  $( this ).addClass('is-checked');
 });
 });

});

// flatten object by concatting values
 function concatValues( obj ) {
  var value = '';
  for ( var prop in obj ) {
    value += obj[ prop ];
  }
  return value;
 }
</script>

Or maybe this could be done without adding any more custom code? I’ve tried adding an interaction to the container class that holds each image, but I can’t figure out how to do a stagger effect by way of an interaction that applies to all the items. As it stands, when I set up the interaction on that container class, it just has them all load in at the same time - not staggered.

Thanks for any ideas you can provide!