Question

我正在使用Metafizzy的Packery库创建一个布局，其中列出了帖子标题和缩略图。单击这些后，我隐藏了初始内容，然后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;
});

反正。我想要任何提示＆amp;关于ajax + packery的技巧。

使用此效果的网站示例。 http://www.prohelvetia.ch/mobile http://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

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

祝你好运，一切顺利！

Packery + ajax加载的内容+重新布局包

2 个答案: