Question

我使用masonry.desandro为我的网站创建一个砌体布局。布局工作正常，但在窗口调整大小后，它不会更新宽度（直到我用F5重新加载网站）。如何在更改方向或调整窗口大小后（不使用F5刷新），如何调整砌体布局的容器大小？

初始化砌体布局：

initMasonry() {
        this.masonry = new Masonry('.additive-post-container', {
          itemSelector: '.item',
          columnWidth: '.item',
          fitWidth: true,
          gutter: 20,
          transitionDuration: 0,
        });

      }

我添加了一个EventListener来对窗口调整大小做出反应。但是当我在函数内部调用masonry.layout（）时，砌体不会刷新。

reloadMasonry(){
  this.masonry.layout();
}


window.addEventListener('resize', this.reloadMasonry.bind(this));

感谢您的帮助！:)

Answer 1

看起来像你的EventListener没有导致DOM重新渲染。每次浏览器窗口更改大小时，强制重新渲染到我们的组件。多亏了这一点，您将以新的，调整后的尺寸将它带回来。检查this，您是否认为它有用

在方向更改或窗口调整大小时调整砖石的大小

1 个答案: