Packey+ajax加载的内容+relayout Packery

Question

我正在Metafizz中用Packey库创建一个布局，在那里我列出了文章标题和缩略图。一旦点击这些内容，我就会隐藏初始内容，然后ajax加载帖子的其余部分来替换初始内容。

我正在寻找如何重新安排包装的技巧，因为我无法使其正常工作。也许我的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/mobilehttp://www.typetoken.net/（虽然这只是添加，而不是删除初始内容）

Answer 1

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

http://imagesloaded.desandro.com/

此外，我会尝试这样的方法来加载和附加新元素：

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

Answer 2

macksol是正确的：问题是图像没有及时加载，为了解决这个问题，我们可以使用Metafizz自己的imagesLoaded js：https://imagesloaded.desandro.com

然而，我无法使用macksol提供的脚本。

这是我的工作javascript调用：

<script type='text/javascript'>
    $('.grid').imagesLoaded( function(){
        $('.grid').packery({
            itemSelector:'.grid-item', // these options should be modified for your layout
            percentPosition:true, // these options should be modified for your layout
            gutter:5 // these options should be modified for your layout
        });
    });
</script>

祝你好运，一切顺利！