打包 + ajax 加载的内容 + 重新布局打包答案

【问题标题】：Packery + ajax loaded content + relayout packery打包 + ajax 加载的内容 + 重新布局打包
【发布时间】：2015-03-30 11:16:49
【问题描述】：

我正在使用 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/（虽然这个只是添加，不删除初始内容）

【问题讨论】：

我想我自己已经破解了这个。还没有尝试过，但会在本周晚些时候尝试。一定是我需要再次运行 imagesloaded，然后再重新布局打包，因为它在第二次加载图像时工作（来自 ajax:ed 内容）。

标签： jquery ajax wordpress packery

【解决方案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();
    });
}

【讨论】：

【解决方案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>

祝你好运，万事如意！

【讨论】：