Принудительно освежить кладку сетки - PullRequest
Новая
       44

Принудительно освежить кладку сетки

0 голосов
/ 28 марта 2019

У меня есть скрипт, который создает сетку, и элементы сетки «перемещаются» каждый раз, когда изменяется ширина области просмотра.У меня нет доступа к сценарию, и я не написал его.Я думаю, что это сетка масонства.

Я динамически меняю содержимое сетки, поэтому мне нужно как-то «обновить» (пересчитать) сетку, не обновляя страницу.На мобильном телефоне я сделал это, изменив метатег «initial-scale» (затем сбросив его), чтобы принудительно обновить сетку.Однако тег viewport на настольном компьютере игнорируется, поэтому я не знаю, как заставить браузер думать, что размеры страницы изменены, и принудительно обновлять сетку.

Любые идеи приветствуются, спасибо.

Ответы [ 2 ]

1 голос
/ 29 марта 2019

Если скрипт масонства хорош, у него может быть функция 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);
}
0 голосов
/ 12 апреля 2019

В зависимости от того, как настроен скрипт, вы можете просто вызвать событие изменения размера, вызывая его пересчет на основе текущего размера. Если скрипт на самом деле отслеживает размер и проверяет изменения, вам нужно будет найти лучший способ заставить скрипт выполнить его пересчет сетки, что означает проверку скрипта. Это может быть так же просто, как изменить значение переменной, в которой скрипт хранит ранее записанную ширину области просмотра непосредственно перед тем, как вы инициируете событие изменения размера.

К вашему сведению: если скрипт загружается на вашу страницу, у вас есть доступ к скрипту. 

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>
...