强制刷新砌体网格答案

【问题标题】：Force a refresh of masonry grid强制刷新砌体网格
【发布时间】：2019-03-28 16:43:38
【问题描述】：

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

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

感谢任何想法，谢谢。

【问题讨论】：

标签： javascript html jquery-masonry

【解决方案1】：

如果砌体脚本很好，它可能有一个 API 功能可以满足您的需求，但我认为您已经探索过了。

或者……

选项 #1：修改父容器

看看您是否可以通过简单地临时修改父容器来强制刷新。例如，将容器宽度瞬间增加 1 个像素，然后恢复到原来的宽度。

选项#2：找到现有的监听器；查找函数

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

要找到该侦听器，请查找“resize”，看看会发生什么。

这是一个普通的 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);
}

【讨论】：

我认为您没有理解我的问题。当文档改变宽度时我不想听，..我想使用js自己“强制”改变宽度。
抱歉！更新了答案。

【解决方案2】：

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

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

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'));

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：