如何使用自己的照片实现无限滚动效果

Question

我有一个无限滚动项目，我真的不想使用 API 像 picsum 和 unsplash 来生成随机照片。我想使用我自己的照片，这些照片来自互联网上的某个地方或本地保存的。我按照教程使我的照片库无限滚动，但我不明白如何将 picsum url 更改为其他内容。最好是本地保存的照片。例如，我可以用 1 到 20 之间的数字来命名它们，但是如何编写“获取”部分？

const getImages = async function() {
  const getImageRes = await fetch(
    `https://picsum.photos/v2/list?page=${page}&limit=8`
  );
  const data = await getImageRes.json();
  const loading = document.querySelector(".loading");

  for (let i = 0; i < 8; i++) {
    let ele = document.createElement("img");
    ele.setAttribute("src", data[i].download_url);
    ele.setAttribute("height", "384");
    ele.setAttribute("width", "512");
    document.getElementById("container").appendChild(ele);
  }
  page++;
  loading.classList.remove("show");
};

Answer 1

const imageSources = [ // Put your image sources in this list
  './images/1.jpg',
  './images/2.jpg',
  './images/3.jpg',
  './images/4.jpg',
  './images/5.jpg'
]

for (let i = 0; i < 5; i++) { // Change this 5 to however many images you have (or use for ... in) 
    let ele = document.createElement("img");
    ele.setAttribute("src", imageSources[i]);
    ele.setAttribute("height", "384");
    ele.setAttribute("width", "512");
    document.getElementById("container").appendChild(ele);
  }
  page++;
  loading.classList.remove("show");
};

如何使用自己的照片实现无限滚动效果

How to use your own photos for infinite scroll effect

javascript

html

gallery

photo