強制刷新砌體網格

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>