Masonry JS 图像库在页面刷新时左对齐

Question

所以我有这个图片库，我使用 MasonryJS 将其显示为 Pinterest 风格的 Masonry。一切正常，但问题是当我刷新页面时。也就是说，当我刷新页面时，所有图像首先都向左对齐，然后才到达实际位置。就像在几毫秒内它会回到那个位置并恢复活力。

这是一个显示实际问题的 gif：

如何在页面刷新时不让它左对齐？无论我刷新多少页面，我都希望它保持在中间。

代码如下：

jQuery(window).on('load', function(){ 
    $('.modal-grid').masonry({
        itemSelector: '.modal-grid-item',
        gutter: 10,
        isFitWidth: true
    });
});

.modal-grid{
    margin: 0 auto;
    margin-top: 30px;
}

.modal-grid-item { 
    width: 300px; margin-bottom: 10px; 
}

.modal-grid-item img { 
    width: 100%; height: auto; 
}

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>


<div class="modal-grid">

  <div class="modal-grid-item">
    <img src="https://i.imgur.com/m7M9EPX.jpg" />
  </div>

  <div class="modal-grid-item">
    <img src="https://i.imgur.com/NzD7YF9.jpg" />
  </div>

  <div class="modal-grid-item">
    <img src="https://i.imgur.com/8zvUjul.jpg" />
  </div>

  <div class="modal-grid-item">
    <img src="https://i.imgur.com/WNmP9VL.jpg" />
  </div>

  <div class="modal-grid-item">
    <img src="https://i.imgur.com/0nwzhDV.jpg" />
  </div>

  <div class="modal-grid-item">
    <img src="https://i.imgur.com/ypdixv8.jpg" />
  </div>

  <div class="modal-grid-item">
    <img src="https://i.imgur.com/1oHOvK1.jpg" />
  </div>

  <div class="modal-grid-item">
    <img src="https://i.imgur.com/kpjtht1.jpg" />
  </div>

  <div class="modal-grid-item">
    <img src="https://i.imgur.com/QAQ0dk6.jpg" />
  </div>

    <div class="modal-grid-item">
    <img src="https://i.imgur.com/m7M9EPX.jpg" />
  </div>

  <div class="modal-grid-item">
    <img src="https://i.imgur.com/NzD7YF9.jpg" />
  </div>

  <div class="modal-grid-item">
    <img src="https://i.imgur.com/8zvUjul.jpg" />
  </div>

  <div class="modal-grid-item">
    <img src="https://i.imgur.com/WNmP9VL.jpg" />
  </div>

  <div class="modal-grid-item">
    <img src="https://i.imgur.com/0nwzhDV.jpg" />
  </div>

  <div class="modal-grid-item">
    <img src="https://i.imgur.com/ypdixv8.jpg" />
  </div>

  <div class="modal-grid-item">
    <img src="https://i.imgur.com/1oHOvK1.jpg" />
  </div>

  <div class="modal-grid-item">
    <img src="https://i.imgur.com/kpjtht1.jpg" />
  </div>

  <div class="modal-grid-item">
    <img src="https://i.imgur.com/QAQ0dk6.jpg" />
  </div>
  
    <div class="modal-grid-item">
    <img src="https://i.imgur.com/m7M9EPX.jpg" />
  </div>

  <div class="modal-grid-item">
    <img src="https://i.imgur.com/NzD7YF9.jpg" />
  </div>

  <div class="modal-grid-item">
    <img src="https://i.imgur.com/8zvUjul.jpg" />
  </div>

  <div class="modal-grid-item">
    <img src="https://i.imgur.com/WNmP9VL.jpg" />
  </div>

  <div class="modal-grid-item">
    <img src="https://i.imgur.com/0nwzhDV.jpg" />
  </div>

  <div class="modal-grid-item">
    <img src="https://i.imgur.com/ypdixv8.jpg" />
  </div>

  <div class="modal-grid-item">
    <img src="https://i.imgur.com/1oHOvK1.jpg" />
  </div>

  <div class="modal-grid-item">
    <img src="https://i.imgur.com/kpjtht1.jpg" />
  </div>

  <div class="modal-grid-item">
    <img src="https://i.imgur.com/QAQ0dk6.jpg" />
  </div>

</div>

Answer 1

Masonry 有 events 我们可以利用，例如 layoutComplete。我用它来让砌体在隐藏时加载图像。一旦ready 事件触发，我们就会触发 Masonry 自己的layoutComplete 事件来重新计算元素。然后我们运行一次回调以显示 Masonry。

.modal-grid {
    opacity: 0; /* jQuery will remove this later */
    transition: opacity; /* optional */
}

jQuery(window).on('load', function() { 
    /* Init your grid like normal but save it to a variable */
    const $grid = $('.modal-grid').masonry({
            itemSelector: '.modal-grid-item',
            gutter: 10,
            isFitWidth: true
        });
    /*
      Add a one time eventListener to just run on our hand-made "onLoad" event
    */
    $grid.one('layoutComplete', function() {
        /* and fade it in */
        $grid.css('opacity', '1');

        /*
        If it is still happening, you can
        add a setTimeout to delay the fade effect
        */
        /**
        let timeoutHandle;
        timeoutHandle = setTimeout(function() {
            $grid.css('opacity', '1')
            // clear the timeout to make explicitly
            // sure no extra timers are running
            clearTimeout(timeoutHandle); 
        }, 1000);
        */
    });
    
    $(document).ready(function() {
        // trigger the event when the document elements
        // are ready
        $grid.trigger('layoutComplete');
    });
});

如果你想玩它，可以查看 CodePen here。