javascript - Metafizzy Packery组件中的动态调整大小效果

我正在寻找JavaScript Packery 组件。我想将当前实现从GridStack切换到Packery。现在让我停下来的一件事是Packery中的组件（面板）缺乏动态调整大小的效果。现在，我无法在演示或文档中找到此功能。

有什么办法可以在Packery中实现/启用此功能？

最佳答案

当然可以做到。使用“响应式布局”设置作为模型：https://packery.metafizzy.co/layout.html#responsive-layouts

至关重要的是，还应使用Metafizzy自己的imagesLoaded js在图像完全加载后加载javascript：https://imagesloaded.desandro.com

完整的javascript调用（imagesLoaded内部的包装）应如下所示：

<script type='text/javascript'>
    $('.grid').imagesLoaded( function(){
        $('.grid').packery({
            itemSelector:'.grid-item',
            percentPosition:true, // *critical for responsive layout*
            // your own further options
        });
    });
</script>

如果仍然有问题，请尝试反转js调用，以便在每个图像加载后调用imagesLoaded，如在Packery网站上所建议的：https://packery.metafizzy.co/layout.html#imagesloaded

祝好运！