根据网页中的可用区域动态显示的拇指数
我正在创建一个照片库网站，并且有一些用于浏览照片的页面，其中包含缩略图列表（是的，只是一个常规照片网站）。问题是，我希望缩略图填满可用空间（我知道如何获得该空间）。实际上，我想要实现的目标与此非常相似：假设您有大量（超过屏幕区域允许的）缩略图，并且您已将overflow-y设置为隐藏。拇指刚好填满了空间，然后它就离开了屏幕。如果底部的拇指没有离开屏幕，这就是我想要的。我需要更多的东西，比如说“动态”。我有 jQuery，但无法在我的脑海中模拟出所需的效果。
I'm creating a photo gallery website, and there are pages for browsing the photos, with a listing of thumbnails (yes just a regular photo site). The problem is that, I want thumbnails to fill up the available space (I know how to get that one). Actually, what I want to achieve is very similar to this: imagine you have a big number of (more than the screen area allows) thumbnails, and you have set overflow-y to hidden. The thumbs just fill up the space and it goes, off the screen. This would be what I wanted to have if the thumbs in the bottom didn't go off the screen. I need something more, let's say, "dynamic". I've got jQuery, but haven't been able to model the desired effect in my mind.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您应该根据需要动态加载图像以提高性能。请参阅 Yahoo! 中的“减少 DOM 元素数量”部分。加快网站速度的最佳实践。使用 jQuery 检查要在其中渲染图像的 div 的大小。加载足够的图像来填充 div，然后根据需要动态加载更多图像（在窗口调整大小或滚动时）。我不清楚你到底想要实现什么，所以我不能说得更具体。
You should load the images dynamically as needed to improve performance. See the "Reduce the Number of DOM Elements" section in the Yahoo! Best Practices for Speeding Up Your Web Site. Use jQuery to check the size of the div in which you are rendering the images. Load just enough images to fill the div and then load more images on the fly as needed (on window resize or scroll). It is not clear to me exactly what you want to achieve so I can't be more specific than that.
好吧，无论如何找到了进入它的方法。我只是加载大量拇指，将拇指容器的溢出设置为隐藏，并通过Javascript（实际上是jQuery），当我调整窗口大小时检查拇指顶部+高度是否超过窗口的高度。如果是，我只是隐藏那个拇指，如果不是，我只是显示它。效果很好！
Ok found the way into it anyway. I just load a big number of thumbs, set the overflow-y of the thumbs container to hidden, and by Javascript (actually jQuery), when I resize the window check if the thumbs top + height exceeds window's height. if it does, I simply hide that thumb, if it doesn't I simply show it. It works great!