0

好吧,假设我有 10 个缩略图,并且我有一个高度固定但宽度有弹性的容器。有没有办法将该 div 中溢出的所有缩略图移动到新创建的 div 包装器中?

我希望在另一个包装器中所有溢出的缩略图的原因是因为我想将这些包装器实现到轮播中,因此可以通过单击轮播上的下一步按钮来找到所有溢出的缩略图。

<div class="wrapper">
    <a href="#"><img src="" class="thumb" alt="thumbnail" /></a>
    <a href="#"><img src="" class="thumb" alt="thumbnail" /></a>
    <a href="#"><img src="" class="thumb" alt="thumbnail" /></a>
    <a href="#"><img src="" class="thumb" alt="thumbnail" /></a>
    <a href="#"><img src="" class="thumb" alt="thumbnail" /></a>
    <a href="#"><img src="" class="thumb" alt="thumbnail" /></a>
    <a href="#"><img src="" class="thumb" alt="thumbnail" /></a>
    <a href="#"><img src="" class="thumb" alt="thumbnail" /></a>
    <a href="#"><img src="" class="thumb" alt="thumbnail" /></a>
    <a href="#"><img src="" class="thumb" alt="thumbnail" /></a>
</div>

问题是因为这是一个响应式设计,我也需要它在调整窗口大小时工作。因此,如果用户减小窗口的宽度,则第一个包装容器中将出现更少的缩略图,并且随着宽度容器的增加,第一个包装容器中将出现更多的缩略图。

我认为这附近会有一个插件,但我没有遇到任何东西。

谢谢您的帮助。

编辑


我设法让它在页面加载时工作,但是在调整窗口大小时我遇到了问题。我正在使用 JRespond 在特定窗口宽度上触发 wrap_thumbs 函数。看来该功能可能被多次触发导致浏览器基本崩溃。

下载链接: project_ZIP

4

0 回答 0