砌体容器网格高度问题答案

【问题标题】：Masonry Container Grid Height Issue砌体容器网格高度问题
【发布时间】：2015-07-31 09:01:18
【问题描述】：

我使用了无限滚动角度的砌体，所以当用户到达产品列表的末尾时，会附加一个 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 中面临这个问题，只是砌体网格的容器高度错误，这就是为什么 that's all people div 从底部出现在上方的原因。我该如何解决？

【问题讨论】：

尝试将overflow: hidden 或clearfix 放在容器上。如果这不起作用，则可能是因为您在图像加载更改之前启动了砌体

标签： html css masonry

【解决方案1】：

使用 ImageLoaded js lib 来解决这个问题：

https://imagesloaded.desandro.com/

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

【讨论】：

【解决方案2】：

我在 Masonry 上遇到了同样的问题，我在问题的屏幕截图中看到它可能是同一个问题。如果<img> 标签没有设置宽度或高度（不一定作为标签属性，也可以作为 CSS 属性），则添加到 DOM 中的元素将被评估为错误的尺寸，因为网格项目加载图像后会更高。

【讨论】：