将缩略图移动到另一个容器中

时间:2012-11-29 20:29:25

标签: jquery

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

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

<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

0 个答案:

没有答案