无法重新加载 jQuery Masonry

Question

我有一个显示 25 张图片的网站。我创建了一个按钮，上面写着“加载更多”。这些按钮通过 Ajax 从 php 脚本中提取 25 张图像。这部分实际上工作正常。问题是，我正在使用 jquery masonry 来对齐图像。

现在，它在页面加载时调用 Masonry 函数。

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

但是，当我想在之后调用 Masonry() 函数时，它不起作用。

如果我不在加载时调用 Masonry()，它在我的 ajax 函数中可以正常工作。

关于为什么会发生这种情况的任何想法？

Answer 1

重新加载后再次调用批量 masonry() 为我解决了这个问题。

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

Answer 2

您需要调用appended 将新项目添加到砌体容器中：

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

仅供参考：作为使用“加载更多”按钮的替代方法，请查看使用无限滚动：http://masonry.desandro.com/demos/infinite-scroll.html