Mastering Waterfall Layouts: JS, jQuery, and CSS Implementations

JS Implementation of Waterfall Layout

The most flexible method uses plain JavaScript. After adding the standard HTML skeleton (shown in the first image), include the script file in the page head:

<script src="js/index.js"></script>

The external

index.js

defines helper functions to obtain elements by ID, find an element’s index in an array, and calculate the positions of each box. In

window.onload

the main function is called with the container ID (e.g.,

main

) and the box class name (e.g.,

box

).

To support infinite scrolling, the script checks whether the page scroll offset plus the viewport height exceeds the top offset of the last box; when true, it loads additional static image data and re‑applies the layout algorithm. The relevant loading logic is illustrated in the subsequent images.

jQuery Implementation of Waterfall Layout

When jQuery is available, the same HTML and CSS are reused. After loading the jQuery library, the same JavaScript functions (with identical names) are placed in a separate file and invoked in the same way. The two core functions—one for arranging boxes and another for detecting when to load more—are shown in the following screenshots.

CSS Implementation of Waterfall Layout

The simplest approach requires no JavaScript at all. By applying a few CSS rules (three lines of code) to the container and its child boxes, the browser automatically creates a masonry‑style flow. The complete CSS snippet is displayed in the image below.

All three methods achieve the same visual result, allowing developers to choose the level of complexity that fits their project.