Question

感谢迄今为止的所有尝试。但我觉得我没那么清楚，所以我决定重写这个问题。因为我一直在寻找答案，或修复，或有些东西来解决我的问题。

概述：我的客户想要拼贴图像。单击时，图像将在prettyPhoto（灯箱克隆）中打开。

我正在使用masonry.js对图像进行网格化。我正在使用imagesloaded.js来“延迟加载”缩略图。然后我也使用classie.js，AnimOnScroll.js和modernizr.js。

因此，在构建缩略图的ul时，一切都很有效。但是，当我将其插入现有网站时，它就会停止工作。

客户的网站布局类似于框架网站。整个页面是一定高度，中间有一个部分（#mainbody）在需要时滚动，如下所示：

---------------------------------------------
|                  HEADER                   |
---------------------------------------------
|     |                               |     |
|     |           MAINBODY            |     |
|     |          (scrolls)            |     |
|     |                               |     |
|     |                               |     |
---------------------------------------------
|                  FOOTER                   |
---------------------------------------------

问题是#mainbody滚动，整个页面滚动，这只会导致显示一些缩略图。其余的都在那里，但你看不到它们。

我已经设置了一个虚拟网站here来展示，而不是在这里发布大量代码。希望这会让事情变得更容易。

除了两个样式表（component.css for masonry.js和default.css）之外，我添加了test.css，它只包含#mainbody的代码。如果您参考test.css，一切正常。

希望我让一切都变得更加清晰。

Answer 1

抱歉 - 我尝试将其添加为评论，但还没有足够的代表。因此，脚本被最大高度混淆，并且在加载图像时不考虑它。您可能需要调整脚本以在滚动时刷新所述最大高度。或者（这是一个长镜头），如果160多个图像只是在长列表中，您是否尝试将一些css添加到初始未处理的UL标签中？喜欢也许他们全都离开了。我这样说是假设脚本将重写UL样式，以便以预期的方式显示图像。

Answer 2

将UL嵌套在另一个div中可能会有所帮助，因此max-height在父div上，如：

<div id="mainbody">
  <div id="galleryWrapper">
    <ul></ul>
  </div>
</div>

我对你的CSS有点困惑

#mainbody {    
  height: auto !important;
  height: 650px;
}

因此将始终使用 height auto 。

max-height导致javascript停止运行

2 个答案: