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调用（packery 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

祝你好运！