Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/ClaytonSeager/InifinityScroll/llms.txt

Use this file to discover all available pages before exploring further.

Infinity Scroll is a sleek, responsive image gallery built entirely with vanilla JavaScript, HTML5, and CSS3. It demonstrates how to wire up the Unsplash API to an infinite-scroll feed — fetching a fresh batch of photos every time the user approaches the bottom of the page — all without a single front-end framework or build step.

Quickstart

Clone the repo, add your API key, and launch the gallery in under five minutes.

Configuration

Set your Unsplash API key and tune the per-request image count.

Infinite Scroll

Learn how the scroll event listener drives continuous image loading.

JavaScript API Reference

Full reference for every function and variable in Infinity.js.

​
How it works

The gallery runs a simple, repeating fetch cycle driven by four key pieces:
  1. getPhotos() — An async function that calls getApiUrl() to build the correct Unsplash endpoint (random or search), fetches the response with the native fetch API, parses the JSON, and stores the results in photosArray. When the response is a search result, it reads data.results; for random photos it reads data directly. Any network error is caught and logged to the console.
  2. displayPhotos() — Iterates over photosArray and, for each photo, creates an <a> element (linking to the photo’s Unsplash page via photo.links.html) and an <img> element (sourced from photo.urls.regular, with alt and title set from photo.alt_description). Each <img> gets a load event listener that calls imageLoaded(). Both elements are appended directly into the #Image__Container <div>.
  3. imageLoaded() — Fires each time an individual image finishes loading. It increments imagesLoaded and totalLoadedImages (displayed in the live image counter in the header). Once imagesLoaded equals totalImages for the current batch, it resets imagesLoaded to 0, flips ready to true, and hides the loader overlay by setting loader.hidden = true.
  4. Scroll event — A scroll listener on window checks whether innerHeight + scrollY >= offsetHeight - 1000. When the user is within 1000 pixels of the page bottom and ready is true, it sets ready = false (preventing duplicate fetches) and calls getPhotos() again to load the next batch.

​
Project structure

FilePurpose
index.htmlApplication shell — declares the sticky title header with the live image counter, the search bar, the #Loader overlay, and the #Image__Container target <div>.
Infinity.jsAll application logic — API configuration constants, getPhotos(), displayPhotos(), imageLoaded(), getApiUrl(), search handling, and the scroll/scroll-top event listeners.
style.cssAll visual styles — sticky header with scroll-blur effect, responsive image container, animated loader overlay, pill-shaped search bar, and the “Back to Top” fixed button.
assets/Static assets including the animated loader.svg spinner and the project logo image used in the README.
Infinity Scroll is a learning exercise. The project intentionally uses no libraries or frameworks so that every concept — infinite scroll, Unsplash API integration, DOM manipulation with createElement and setAttribute, async/await with fetch, and responsive design via CSS media queries — is visible and approachable in plain code.

​
Key features

Infinite Scroll Loading

Automatically fetches the next batch of images when the user scrolls within 1000px of the page bottom — no button clicks required.

Keyword Search

A persistent search bar lets users filter the feed by keyword. Submitting a new query clears the gallery and restarts the fetch cycle with the Unsplash search endpoint.

Live Image Counter

A counter in the sticky header tracks the total number of images loaded across the entire session, updating after every batch.

Responsive Design

CSS media queries reflow the image container and header to fill the full viewport width on screens 600px and below, with no horizontal scrolling.

Loader Overlay

A full-screen semi-transparent overlay with a centered SVG spinner appears during every fetch and is hidden automatically once all images in the batch have loaded.

Back to Top Button

A fixed “Back to Top” button fades in after the user scrolls past one viewport height and smoothly returns them to the top on click.

Build docs developers (and LLMs) love

Get started for freeTalk to us