jquery - Packery + ajax 加载内容 + 重新布局 Packery

Question

我正在使用 Metafizzy 的 Packery 库创建一个布局，其中列出了帖子标题和缩略图。单击这些按钮后，我将隐藏初始内容，然后使用 ajax 加载帖子的其余部分以替换该初始内容。

我正在寻找有关如何重新布局 Packery 的提示，因为我无法使其正常工作。也许我的 ajax 函数需要不同才能工作。 ajax 加载可以工作，但是 packery 中存在重叠问题。

 $(".modlink").click(function(){
        $(this).find('div.block:first').toggleClass("hidden");
        var post_link = $(this).attr("rel");
        $(this).find('article').toggleClass("d").fadeIn();
        $(this).find('div.hiddengems').toggleClass("showing");
        $(this).find('div.hiddengems').load(post_link); 
        $container.packery('layout');
    return false;
});

无论如何。我希望了解有关 ajax + packery 的任何提示和技巧。

使用此效果的网站示例。 http://www.prohelvetia.ch/mobile http://www.typetoken.net/ (虽然这只是添加，而不是删除初始内容)

Answer 1

听起来好像 packery 正在尝试在所有图像加载之前构建网格。尝试使用 ImagesLoaded.js。它由 MetaFizzy 制作，设计用于与 packery 一起使用。

http://imagesloaded.desandro.com/

另外，我会尝试这样的方法来加载并附加新元素:

function appendPackeryElement() {
    $.ajax({
      method: "GET",
      url: "/theurl/"
    })
    .done(function( data ) {
        var $container = $('.your-packery-container');
        $container.packery( 'fit', data ).fadeIn();
    });
}