Freemasonry callback in jQuery infinite scroll does not work in Wordpress - and neither is infinite scroll plugin

I have a lot of problems with the combination of Freemasonry and Infinite Scrolling in Wordpress, namely this page .

I'm going to get Freemasonry to work with infinite scrolling, requires a callback in infinite jQuery scrolling code - this seems to be well known. However, I can only imagine infinite scrolling working on my Wordpress site under special circumstances, and given these circumstances, I am not sure how to integrate Freemasonry.

This code is borrowed from the endless scrolling demo of the Masonry.js site and is in the footer right now:

<script>
  $(function(){

    var $container = $('.et_pb_blog_grid_wrapper');

    $container.imagesLoaded(function(){
      $container.masonry({
        itemSelector: '.post',
        columnWidth: 100
      });
    });

    $container.infinitescroll({
      navSelector  : '#nextposts',    // selector for the paged navigation 
      nextSelector : '#nextposts a',  // selector for the NEXT link (to page 2)
      itemSelector : '.post',     // selector for all items you'll retrieve
      loading: {
          finishedMsg: 'No more pages to load.',
          img: 'http://dearjackalope.com/juliaproblems/wp-content/themes/juliamariani/images/ajax-loader.gif'
        }
      },
      // trigger Masonry as a callback
      function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
          // show elems now they're ready
          $newElems.animate({ opacity: 1 });
          $container.masonry( 'appended', $newElems, true ); 
        });
      }
    );

  });
</script>

      

        
        
        
      

    

The problem is, although it works in static HTML, it has no effect on this page, and I have no idea why! What is this job:

<script>
    var infinite_scroll = {
        loading: {
            img: "<?php echo get_stylesheet_directory_uri(); ?>/images/ajax-loader.gif",
            msgText: "<?php _e( 'Loading the next set of posts...', 'custom' ); ?>",
            finishedMsg: "<?php _e( 'All posts loaded.', 'custom' ); ?>"
        },
        "nextSelector":"#nextposts a",
        "navSelector":"#nextposts",
        "itemSelector":".post",
        "contentSelector":".et_pb_blog_grid_wrapper"
    };
    jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll );
    </script>

      

        
        
        
      

    

But I'm not sure how to add a Masonry callback to this - the way the variables are declared in the callback doesn't look like that at all (I know the dollar sign is defined in jQuery and it appears in the callback, but not in the original code - I'm not sure if it matters?) and I'm not sure where exactly in this function it should go. I tried:

<script>
var infinite_scroll = {
        loading: {
            img: "<?php echo get_stylesheet_directory_uri(); ?>/images/ajax-loader.gif",
            msgText: "<?php _e( 'Loading the next set of posts...', 'custom' ); ?>",
            finishedMsg: "<?php _e( 'All posts loaded.', 'custom' ); ?>"
        },
        "nextSelector":"#nextposts a",
        "navSelector":"#nextposts",
        "itemSelector":"article.post",
        "contentSelector":".et_pb_blog_grid_wrapper"
        },
        // hide new items while they are loading
        var $newElems = jQuery(newElements).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
        // show elems now they're ready
        $newElems.animate({ opacity: 1 });
        $container.masonry( 'appended', $newElems, true );
        });
    };
    jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll );
</script>   

      

        
        
        
      

    

and this by declaring a new function:

<script>
    var infinite_scroll = {
        loading: {
            img: "<?php echo get_stylesheet_directory_uri(); ?>/images/ajax-loader.gif",
            msgText: "<?php _e( 'Loading the next set of posts...', 'custom' ); ?>",
            finishedMsg: "<?php _e( 'All posts loaded.', 'custom' ); ?>"
        },
        "nextSelector":"#nextposts a",
        "navSelector":"#nextposts",
        "itemSelector":"article.post",
        "contentSelector":".et_pb_blog_grid_wrapper"        
    });
    };
    jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll );
    function newElements()  // hide new items while they are loading
        var $newElems = jQuery(newElements).css({ opacity: 0 });
            // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
            // show elems now they're ready
        $newElems.animate({ opacity: 1 });
        $container.masonry( 'appended', $newElems, true );
    </script>

      

        
        
        
      

    

None of them work, so I'm not sure where I should be putting the callback, or if there is something about the original code that means the callback won't work. I've spent about eight hours reading through the Javascript tutorials and documentation and I'm not sure what to try next. :(

There is currently an unsupported but still seemingly widely used plugin called Infinite-Scroll that enables the Freemasonry Mode checkbox, but when I tried to install it I got nothing - it didn't seem to load any code on the page, so the option doesn't appear here. It might be worth noting that I also found that Jetpack's infinite scroll function didn't load any code on the page even after fully configuring the theme for it, so I seem to be limiting myself to the plugin-free code here.

Is there something fundamentally wrong with my thread that is causing all of these problems? My Javascript is basic at best and I'm really struggling to find out where to go from here - any help would be much appreciated.