砌体容器网格高度问题

Question

我使用了带有无限滚动角度的砌体，所以当用户到达产品列表的末尾时，会附加一个div

 <div class="row top10">
    <ul class="productsList" masonry load-images="false" infinite-scroll="loadMore()" infinite-scroll-disabled="endReached" infinite-scroll-immediate-check="false" >
        <li class="col-sm-4 col-lg-3 masonry-brick" ng-repeat="product in products" images-loaded="productsImagesLoadedEvents">
           // markup of the tile
        </li>
    </ul>
</div>
<div class="row bottom10" ng-show="endReached">
    <div class="col-xs-12 thatsAllFolks">
        That's all folks!
    </div>
</div>

相同的CSS是：

    .thatsAllFolks {
      background: #f5f5f5;
      text-align: center;
      color: #aaa;
      border-radius: 5px;
    }

我在safari中遇到的这个问题只是砌体网格的容器具有错误的高度，这就是为什么所有的人员div都出现在底部的上方。我该如何解决？

Answer 1

使用ImageLoaded js库修复此问题：

https://imagesloaded.desandro.com/

这很精确，因为在所有图像完全加载之前创建了网格。因此来自同一作者的这个库可以解决此问题。