MasonryJS图片库在页面刷新左对齐 [英] MasonryJS image gallery aligns left on page refresh

问题描述

因此，我有了这个图片库，并通过使用MasonryJS将其显示为Pinterest风格的砖石.一切正常，但问题是当我刷新页面时.也就是说，当我刷新页面时，所有图像首先都向左对齐，然后到达实际位置.就像在几毫秒内到达该位置并恢复原状.

So I have this image gallery which I displayed as Pinterest-style Masonry by using MasonryJS. Everything works fine but the problem is when I refresh the page. That is, when I refresh the page, all the images align to the left at first then comes to the actual place. It's like for a couple of milliseconds it goes to that position and comes back to life.

以下是显示实际问题的gif:

Here's a gif which shows the actual problem:

在页面刷新时如何不将其左对齐?我只是希望它保持在中间，无论我刷新页面多少.

How can I not have it left-aligned in page refresh? I just wish it to stay in the middle no matter how much I refresh the page.

代码如下:

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>

推荐答案

砌筑具有事件我们可以利用 layoutComplete 之类的优势.我用它来砌筑隐藏的图像.一旦 ready 事件触发，我们将触发Masonry自己的 layoutComplete 事件以重新计算元素.然后我们运行一次回调以显示Masonry.

Masonry has events we can take advantage of, like layoutComplete. I used that to get masonry to load the images while hidden. Once the ready event fires, we trigger Masonry's own layoutComplete event to recalculate the elements. Then we run a callback once to reveal 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');
    });
});

如果您想使用它，可以在此处签出.

If you wanna play around with it, you can check out the CodePen here.

这篇关于MasonryJS图片库在页面刷新左对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！