无法重新加载jQuery Masonry

I got a site that shows 25 images. I've created a button that says "Load More". The buttons pull 25 images from a php script via Ajax. This part is actually working fine. The problem is, I'm using jquery masonry to align the images.

Right now, it calls the Masonry function when the page is loaded.

function Masonry() {
    var $container = $('#fit');
    $container.imagesLoaded(function () {
        $container.masonry({
            itemSelector: '.masonryImage'
        });
    });
}

However, when I want to call the Masonry() function afterwards, it doesn't work.

If I don't call the Masonry() on load, it works fine in my ajax function.

Any ideas as to why this happens?

Calling a bulk masonry() again after the reload fixed this issue for me.

$('#fit').append(newitems).masonry('reloadItems').masonry();

You need to call appended to add the new items to the masonry container:

$('#fit').masonry( 'appended', newitems);

FYI: as an alternative to using a "Load More" button, take a look at using Infinite Scroll: http://masonry.desandro.com/demos/infinite-scroll.html