多行无限滚动图库
如何在 html/css/javascript 中获得多行无限循环、滚动画廊?
How can I get a multi row infinite loop, scrolling gallery in html/css/javascript?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
如何在 html/css/javascript 中获得多行无限循环、滚动画廊?
How can I get a multi row infinite loop, scrolling gallery in html/css/javascript?
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
接受
或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
发布评论
评论(1)
基本思想是,当您到达列表的末尾(取决于您滚动的方向)时,抓住列表的第一个元素并将其附加到当前可视化的元素之后,这样您将从头开始。
如果向右或向下滚动,则必须抓住列表开头的元素并将其放置在列表的末尾。
如果您向左或顶部滚动,则必须抓住列表的最后一个元素并将其放在列表的第一位。
这是实现无限滚动的非常简单的方法。
The basic idea is, when you reach the end of the list (depending on which direction you are scrolling), grab the first element of the list and append it after the currently visualized one, this way you will start from the beginning.
If you are scrolling to the right or to the bottom, you have to grab the element at the beginning of the list and place it at the end of the list.
If you are scrolling to the left or to the top, you have to grab the last element of the list and place it first in the list.
This is a really simple way of achieving an infinite scrolling.