<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Infinite Scroll</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1>Infinite Scroll by Agunechemba Ekene</h1>
  <div class="container" id="container"></div>
  <script src="script.js"></script>
</body>

</html>
.container {
  disply: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
h1 {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  background-color: #fff;
  padding: 20px;
  border-bottom: 1px solid #ddd;
}

.header {
  font-size: 32px;
  color: black;
  text-align: center;
  font-family: Verdana, sans-serif;
}

img {
  width: 400px;
  height: 400px;
  margin: 4px;
  object-fit: cover;
}

const container = document.querySelector(".container");
const URL = `https://randomfox.ca/images/`;

function getRandomNumber() {
  return Math.floor(Math.random() * 100);
}

function loadImages(numImages = 6) {
  let i = 0;
  while (i < numImages) {
    const img = document.createElement("img");
    img.src = `${URL}${getRandomNumber()}.jpg`;
    img.onerror = function () {
      console.error(`Error loading image: ${img.src}`);
    };
    container.appendChild(img);
    i++;
  }
}

loadImages();

window.addEventListener("scroll", () => {
  if (
    window.scrollY + window.innerHeight >=
    document.documentElement.scrollHeight
  ) {
    console.log("Loading more images...");
    loadImages();
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.