Не удается получить кладку для правильного размещения после изменения размера окна - PullRequest
Новая
       11

Не удается получить кладку для правильного размещения после изменения размера окна

0 голосов
/ 08 апреля 2019

У меня есть этот простой ванильный сайт Javascript, использующий Masonry для размещения некоторых изображений: https://frakkinfrocks.com

При загрузке он отлично работает, но последующее изменение размера портит макет. Я не могу понять, почему. Я попытался добавить слушатель события изменения размера окна для изменения размера / макета Masonry, но, похоже, это не имеет никакого эффекта. Похоже, что ни одно из решений, предложенных для подобных вопросов SO, не решает проблему.

Как мне заставить его изменить макет при изменении размера, и как только это сработает, есть ли способ заставить его изменить количество столбцов, чтобы отдельные элементы не были слишком маленькими или слишком большими? 

        var grid = document.querySelector('.grid');

        var msnry = new Masonry( grid, {
          itemSelector: '.grid-item',
          columnWidth: '.grid-sizer',
          percentPosition: true
        });


        imagesLoaded( grid ).on( 'progress', function() {
          // layout Masonry after each image loads
          msnry.layout();
        });

        var window = document.defaultView;
        const delay = 100;  // Your delay here

        const originalResize = evt => {
          console.log(evt);  // Your resize function here
          msnry.resize();
          msnry.layout();
        };


        (() => {
          resizeTaskId = null;

          window.addEventListener('resize', evt => {
            if (resizeTaskId !== null) {
              clearTimeout(resizeTaskId);
            }

            resizeTaskId = setTimeout(() => {
              resizeTaskId = null;
              originalResize(evt);
            }, delay);
          });
        })();
...