时间戳

首页 > 解决方案 > 如何创建无限滚动图片库

javascript - 如何创建无限滚动图片库

问题描述

我试图找出一种方法，让同一行上的多个图像延伸超过 div 继续向左滚动，直到它不在视野范围内，此时它将移动到图像库的末尾并继续再次滚动即使它在视野之外。黑色是网页，蓝色是包含图像的 div。（编码被推到页面底部。）最后红色是图像。

这是我到目前为止的代码。我在课堂上玩图像，因为我觉得这会有所帮助，但我不确定如何。

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>

标签： javascripthtmlcssinfinite

解决方案

由于图像可以有不同的纵横比，一次只将一张图像移动到队列的后面是非常麻烦的，并且需要 JavaScript 干预。

一个类似的方法是正好有两个图像副本，将永久 div 元素设置为向左移动其宽度的 50%，即将所有 10 个图像移到左侧，并将视口填充为第二盘的开始。

然后将 permas 恢复到最初的位置并重复。

评论中表达了一些担忧，即需要做太多工作。我测试了 10 张不同大小和不同内容的图像以及问题中给出的图像，发现我的 Windows 10 相当强大的笔记本电脑上的 GPU 使用率非常一致，约为 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>

推荐阅读