强制刷新砌体网格

Question

我有一个创建网格的脚本，每次更改视口宽度时，网格元素都会“重新定位”。我无权访问脚本，也没有写过。我认为这是一个砌体网格。

我正在动态地改变网格的内容，所以我需要以某种方式“刷新”（重新计算）网格而不刷新页面。在移动设备上，我通过更改“初始比例”元标记（然后重置它）来强制网格更新。但是，在桌面上忽略了视口标记，因此我不知道如何让浏览器认为页面尺寸已更改并强制刷新网格。

任何想法都表示赞赏，谢谢。

Answer 1

如果砌体脚本很好，它可能有一个API功能来做你需要的，但我想你已经探索过了。

另外...

选项＃1：修改父容器

查看是否可以通过简单地临时修改父容器来强制刷新。例如，将容器宽度增加1个像素，然后返回原始宽度。

选项＃2：找到现有的监听器;找到功能

现有脚本可能有一个监听器+操作，用于在视口更改大小时（如您所描述的那样）。检查脚本并找到该侦听器，并查看它在内部运行的内容。它将具有一些函数来计算和渲染网格，并且您希望在自己的数据更新函数中调用这些相同的函数。

要找到该侦听器，请执行“调整大小”的查找，查看出现的内容。

这是一个vanilla JS调整大小监听器的样子：

var screenWidth = document.documentElement.clientWidth;
resizeRefresh(screenWidth);


function resizeRefresh(width) {

    window.addEventListener("resize", function(){
          newWidth = document.documentElement.clientWidth;

          if (newWidth != width) {

                width = newWidth;

                // do stuff
          }

  }, true);
}

Answer 2

根据脚本的设置方式，您可以简单地触发调整大小事件，使其根据当前大小重新计算。如果脚本实际上正在跟踪大小并检查更改，那么您将需要找到强制脚本执行网格重新计算的最佳方法，这意味着检查脚本。它可能就像在触发resize事件之前更改脚本存储先前记录的视口宽度的变量值一样简单。

仅供参考：如果脚本正在您的页面上加载，那么您可以访问该脚本。

window.addEventListener("resize", function(){
  // Resize event listener from masonry script
  console.log("Masonry grid resized for width "+window.innerWidth);
});

// If using jQuery
$(window).trigger("resize");

// Plain JS version
window.dispatchEvent(new Event('resize'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>