infinte scroll + imagesloaded + masonry on tumblr API loaded via ajax within shopify

Question

I've been trying to make this work for a while but haven't made any progress. Not sure if I'm missing something or if it just won't work within this setup.

In short: client has a shopify site, and wants to load in images from tumblr in an infinite scroll.

I'm using the standards from DeSandro: Infinite Scroll, Masonry, ImagesLoaded, and basing the combination on this pen.

I have the tumblr feed loading in fine via tumblr API, and displayed in a masonry grid, but can't get the infinite scroll to work.

Will InfiniteScroll not work because the content is loaded in via ajax, and isn't actually on the page yet when InfiniteScroll tries to load it in? Any insight would be appreciated!

$(document).ready(function() {

// Main content container
var $container = $('#tblr_container');

$.ajax({
    url: 'https://api.tumblr.com/v2/blog/xxxxxxx.tumblr.com/posts?api_key=xxxxxxx&limit={{ pagesize }}&offset={{ offset }}&callback=?',
    dataType:'json',
    success: function(data) { 
        $.each(data.response.posts, function(index,item) {
          if (this['type'] === 'photo') {
            var src = item.photos[0].alt_sizes[0].url;
            $("#tblr_container").append('<div class="item masonry__item ' + index + '"><li><img src = "'+src+'"></li></div>');
          } 
        }); 

        // init Masonry
        var $grid = $('#tblr_container').masonry({
            itemSelector: 'none', // select none at first
            columnWidth: '.grid-sizer',
            gutter: 5,
            percentPosition: true,
            stagger: 30,
            // nicer reveal transition
            visibleStyle: { transform: 'translateY(0)', opacity: 1 },
            hiddenStyle: { transform: 'translateY(100px)', opacity: 0 },
        });

        // get Masonry instance
        var msnry = $grid.data('masonry');

        // initial items reveal
        $grid.imagesLoaded( function() {
            $grid.removeClass('are-images-unloaded');
            $grid.masonry( 'option', { itemSelector: '.item' });
            var $items = $grid.find('.item');
            $grid.masonry( 'appended', $items );
        });

        // init Infinte Scroll
        $grid.infiniteScroll({
            path: '.pagination__next',
            append: '.item',
            outlayer: msnry,
            hideNav: '#pagination',
            status: '.page-load-status',
        });         
    }
});

Here's the link: https://negativeunderwear.com/pages/for-women

And, the link to page 2: https://negativeunderwear.com/pages/for-women?page=2&cache=false - this is .pagination__next

(FYI before clicking, it's a women's underwear site.)

Thanks!