Packery + ajax加载的内容+ relayout packery

Question

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

我正在寻找关于我如何重新布局包装的技巧，因为我不能让它正常工作。也许我的ajax函数需要有所不同才能正常工作。ajax加载可以工作，但是在打包中有一个重叠的问题。

 $(".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();
    });
}

Answer 2

macksol是完全正确的:问题是图像没有及时加载，为了解决这个问题，我们可以使用Metafizzy自己的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>

祝你好运，万事如意！