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

Question

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

有什么方法可以 implement/enablePackery 中的此功能？

Answer 1

这当然可以做到。使用 "Responsive Layouts" 设置作为模型：https://packery.metafizzy.co/layout.html#responsive-layouts

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

完整的 javascript 调用（imagesLoaded 中的 packery）应该如下所示：

<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

祝你好运！

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

dynamic resizing effect in Metafizzy Packery component

javascript

jquery

packery

gridstack