如何创建无限滚动的图片库

Question

我正在尝试找出一种方法，让多张图片在同一条线上延伸超过 div 继续向左滚动，直到它超出视野，此时它会移动到最后并继续再次滚动，即使它在视图之外。

这是我目前的代码。我对图像进行游戏 class 因为我觉得这会有所帮助，但我不确定如何。

html, body {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}
*, *::before, *::after {
  box-sizing: border-box;
}
body {
background-color: black;
}
#permas {
  height: 150px;
  bottom: 0;
  background: blue;
  position: absolute;
  overflow:hidden;
  overflow-y: hidden;
  white-space:nowrap;
}
#permas img {
  height: 100%;
}

<html>
<head>
<title>Test site
</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="permas">
  <img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
  <img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
  <img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
  <img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
  <img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
  <img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
  <img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
  <img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
  <img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
  <img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
</div>
<script src="main.js"></script>
</body>
</html>

Answer 1

由于图像可能具有不同的宽高比，因此一次只将一张图像移到队列的后面是非常混乱的，并且需要 JavaScript 干预。

一个类似的方法是恰好有两个图像副本，使 permas div 元素向左移动其宽度的 50%，即让所有 10 张图像不挡路左侧，并让视口由第二组的开始填充。

然后让 permas 回到最初的位置并重复。

评论中有人担心需要做太多工作。我已经测试了 10 张不同大小和不同内容的图像以及问题中给出的图像，发现我相当强大的笔记本电脑上的 GPU 使用率 Windows 10 在 20% 左右非常一致。当然，有更多的图像（并且可能如果某些图像的自然尺寸非常大，虽然我没有测试过）可能需要更多的处理器时间。

我没有看到任何抖动。您必须确信这 10 张图像将超过视口宽度 - 但问题中也做出了这个假设。

这是带有原始图片的片段：

html, body {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  overflow: scroll;
}
*, *::before, *::after {
  box-sizing: border-box;
}
body {
background-color: black;
}
#permas {
  height: 150px;
  bottom: 0;
  background: blue;
  position: absolute;
  overflow:hidden;
  overflow-y: hidden;
  white-space:nowrap;
  
  /* added */
  left: 0;
  animation-name: scroll;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
#permas img {
  height: 100%;
}
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

<div id="permas">
  <img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
  <img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
  <img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
  <img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
  <img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
  <img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
  <img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
  <img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
  <img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
  <img class="scroller" src="https://i.imgur.com/wURYltS.jpg">

  <img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
  <img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
  <img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
  <img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
  <img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
  <img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
  <img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
  <img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
  <img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
  <img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
</div>

如何创建无限滚动的图片库

How do I create an infinite scrolling image gallery

html

javascript

css

infinite