jQuery Packery插件没有正确设置高度

Question

我正在使用Packery插件在我正在构建的网站上为我的图像库提供更有趣的布局。

然后每一个现在，我访问的页面和一些图像的相互重叠，像这样：

但是当我刷新页面，它会显示它正确：

我试过在容器元素上指定高度，但无济于事。

这里是我使用的代码：

CSS：

.packery-grid { 
    min-height: 500px; 
} 

.packery-grid-03 { 
    width: 20%; 
} 

.packery-grid-06 { 
    width: 40%; 
} 

.packery-grid figure { 
    padding: 15px; 
} 

的jQuery：

$(document).ready(function() { 

    // visuals 
    $('.packery-grid').packery({ 
     // options 
     itemSelector: '.packery-grid-item', 
     gutter: 0 
    }); 

}); 

HTML：

 <div class="row"> 

      <div class="packery-grid"> 

       <div class="packery-grid-item packery-grid-03"> 
        <figure> 
        <a href="#" data-toggle="modal" data-target="#modal-visual"> 
        <img src="http://somesite.com/wp-content/uploads/2016/11/255-198x127.jpg" alt="Six" /> 
        </a> 
        </figure> 
       </div> 

       <div class="packery-grid-item packery-grid-03"> 
        <figure> 
        <a href="#" data-toggle="modal" data-target="#modal-visual"> 
        <img src="http://somesite.com/wp-content/uploads/2016/11/319-198x127.jpg" alt="Five" /> 
        </a> 
        </figure> 
       </div> 

       <div class="packery-grid-item packery-grid-03"> 
        <figure> 
        <a href="#" data-toggle="modal" data-target="#modal-visual"> 
        <img src="http://somesite.com/wp-content/uploads/2016/11/IMG_8204-198x127.jpg" alt="Four" /> 
        </a> 
        </figure> 
       </div> 

       <div class="packery-grid-item packery-grid-06"> 
        <figure> 
        <a href="#" data-toggle="modal" data-target="#modal-visual"> 
        <img src="http://somesite.com/wp-content/uploads/2016/11/157-426x284.jpg" alt="Three" /> 
        </a> 
        </figure> 
       </div> 

       <div class="packery-grid-item packery-grid-06"> 
        <figure> 
        <a href="#" data-toggle="modal" data-target="#modal-visual"> 
        <img src="http://somesite.com/wp-content/uploads/2016/11/IMG_4445-426x284.jpg" alt="Two" /> 
        </a> 
        </figure> 
       </div> 

       <div class="packery-grid-item packery-grid-03"> 
        <figure> 
        <a href="#" data-toggle="modal" data-target="#modal-visual"> 
        <img src="http://somesite.com/wp-content/uploads/2016/11/Iceland-198x127.jpg" alt="One" /> 
        </a> 
        </figure> 
       </div> 

      </div> 

     </div> 

    </div> 
</div> 

Answer 1

我想我已经找到他们的支持页面上的解决方案

空载图像可以甩开Packery布局，并导致项目元素 重叠。 imagesLoaded解决了这个问题。

所以我修改我的代码如下所示：

// visuals 
var $grid = $('.packery-grid').packery({ 
    // options 
    itemSelector: '.packery-grid-item', 
    gutter: 0 
}); 

    // layout Packery after each image loads 
    // to prevent overlapping images 
    $grid.imagesLoaded().progress(function() { 
     $grid.packery(); 
    });