调整窗口大小后无法使砖石正确布局

Question

我有一个使用Masonry来布置一些图像的简单香草Javascript网站：https://frakkinfrocks.com

在加载时效果很好，但随后的大小调整会破坏布局。我不知道为什么。我尝试添加窗口大小调整事件监听器以调整大小/布局砌筑，但似乎没有任何效果。对于类似的SO问题建议的解决方案似乎都无法解决该问题。

如何获得调整大小后重新布局的方法，一旦可行，是否有办法改变列数以防止单个项目过小或过大？

        var grid = document.querySelector('.grid');

        var msnry = new Masonry( grid, {
          itemSelector: '.grid-item',
          columnWidth: '.grid-sizer',
          percentPosition: true
        });


        imagesLoaded( grid ).on( 'progress', function() {
          // layout Masonry after each image loads
          msnry.layout();
        });

        var window = document.defaultView;
        const delay = 100;  // Your delay here

        const originalResize = evt => {
          console.log(evt);  // Your resize function here
          msnry.resize();
          msnry.layout();
        };


        (() => {
          resizeTaskId = null;

          window.addEventListener('resize', evt => {
            if (resizeTaskId !== null) {
              clearTimeout(resizeTaskId);
            }

            resizeTaskId = setTimeout(() => {
              resizeTaskId = null;
              originalResize(evt);
            }, delay);
          });
        })();