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

Question

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

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

Answer 1

这当然可以做到。使用“响应式布局”设置作为您的模型：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

祝你好运！