javascript - 最大高度导致 javascript 停止运行

Question

感谢迄今为止的所有尝试。但我觉得我还不够清楚，所以我决定重写这个问题。因为我一直在寻找答案、修复或解决问题的方法。

概述:我的客户想要一幅图像拼贴画。单击时，图像将在 prettyPhoto(灯箱克隆)中打开。

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

因此，在构建缩略图的 ul 时，一切正常。但是当我将它插入现有站点时，它就停止工作了。

客户站点的布局类似于框架站点。整个页面有一定高度并且中间有一个部分(#mainbody)在需要时滚动，如下所示:

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

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

我设置了一个虚拟站点 here进行演示，而不是在此处发布大量代码。希望这会让事情变得更容易。

连同两个样式表(masonry.js 的 component.css 和 default.css)我添加了 test.css，它只包含 #mainbody 的代码。如果你去掉对 test.css 的引用，一切正常。

希望我已经把一切都说得更清楚了。

Answer 1

抱歉 - 我试图将此添加为评论，但还没有足够的代表。因此，脚本对最大高度感到困惑，并且在加载图像时没有考虑到它。您可能必须调整脚本以在滚动时刷新所述最大高度。或者(这是一个远景)，如果 160 多张图像只是在一个长列表中，您是否尝试过将一些 css 添加到初始未处理的 UL 标签？就像把它们都漂浮起来一样。我这么说是假设脚本将重写 UL 样式以便以预期的方式显示图像。