Load More Posts Overlapping in Masonry Layout

[abaney]

I'm using a WordPress plugin called Easy Load More to load more posts for a custom post type.

When the "Load More" button is clicked, the next set of posts (older posts...newest at top) load just fine. However, they cover the top of the initially loaded posts.

In examining the code, it looks like the style attributes (position, left, and top) are not applied to the newly loaded posts (with class .grid-item).

Here is the staging site that's using this code to see this issue in action: https://sheologiestg.wpengine.com/blog-test/

Any idea why these newly added posts aren't loading correctly? Additionally, below is my Javascript call for the Masonry library.

    <script>

    // jQuery
    // init Masonry
    var $grid = jQuery('.grid').imagesLoaded( function() {
        // init Masonry after all images have loaded
        $grid.masonry({
            itemSelector: '.grid-item',
            columnWidth: '.grid-sizer',
            percentPosition: true,
            gutter: 0,
            horizontalOrder: true,
        });
    });
    // layout Masonry after each image loads
    $grid.imagesLoaded().progress( function() {
        $grid.masonry('layout');
    });

    </script>

[abaney]

I added this script too, but it doesn't seem to lay out the newly loaded items:

//  Vanilla JS
var appendButton = document.querySelector('.elm-button');
appendButton.addEventListener( 'click', function() {
    msnry.appended();
    msnry.layout();
});