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

Posted 2023-02-19

【中文标题】Metafizzy Packery 组件中的动态调整大小效果

【英文标题】：dynamic resizing effect in Metafizzy Packery component

【发布时间】：2017-06-15 09:44:53

【问题描述】：

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

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

【参考方案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

祝你好运！