加载时显示和高度的 jQuery 砌体问题答案

【问题标题】：jQuery masonry issue with display and height on load加载时显示和高度的 jQuery 砌体问题
【发布时间】：2017-04-14 22:24:58
【问题描述】：

我在 div 中有一个砌体容器，该容器具有内联样式的 display:none。因为我有几个 div，所以当页面加载时，当点击他们的按钮时，它会像幻灯片一样切换。这会干扰砌体测量负载高度的能力，因此砖会从容器中溢出。

【问题讨论】：

标签： javascript css height jquery-masonry

【解决方案1】：

更新：我的回答中.load() 部分不是应该如何完成的。

见：http://masonry.desandro.com/layout.html#imagesloaded

您可以通过以下方式修复它：

在里面添加overflow: hidden到.panel到clear the floated elements。

~~在 .load() 而不是 .ready() 上运行 Masonry：~~

<script type="text/javascript">
    $(document).load(function (){
      $('#contain').masonry({
        itemSelector: '.item',
        columnWidth: 100
      });
    });
</script>

~~带有这些修复的版本：http://jsbin.com/oyido4/4~~

【讨论】：

完美！谢谢。我知道使用溢出来清除浮动元素，但它在 LOAD 上运行砌体来完成它。
查看我的答案的更新。 .load() 确实有效，但它会让 Masonry 等待页面上的所有内容被加载，而不仅仅是 #contain 中的图像。