2

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

4

2 回答 2

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();
    });
}
于 2015-06-11T02:34:50.043 回答
1

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>

祝你好运，万事如意！

于 2017-12-13T11:07:47.210 回答