Question

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

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

感谢任何想法，谢谢。

Answer 1

如果砌体脚本不错，它可能具有API功能来满足您的需求，但是我想您已经对此进行了探索。

或者...

选项1：修改父容器

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

选项2：查找现有的侦听器；找到功能

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

要找到该侦听器，请查找“调整大小”，看看会发生什么。

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

强制刷新砌体网格

2 个答案: