Get started with waterfall.js CDN

MIT licensed

Waterfall.js: Manages asynchronous tasks in a waterfall way in Node.js.

Tags:
  • waterfall
  • pinterest
  • masonry
  • grid
  • layout
  • columns

Stable version

Copied!

How to start using waterfall.js CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with waterfall.js CDN - cdnhub.io</title>
  <script src="https://cdn.cdnhub.io/waterfall.js/1.1.0/waterfall.min.js"></script>
</head>
<body>
  <button id="loadImages">Load Images</button>
  <div id="container"></div>

  <script>
    const container = document.getElementById('container');
    const loadImagesBtn = document.getElementById('loadImages');

    const waterfall = new Waterfall(container, [
      {
        selector: '.image',
        query: 'img.image:not(.loaded)',
        load: function(imageElement) {
          const img = new Image();
          img.src = imageElement.dataset.src;
          img.classList.add('loaded');
          imageElement.appendChild(img);
        }
      }
    ]);

    loadImagesBtn.addEventListener('click', () => {
      waterfall.run();
    });
  </script>

  <style>
    .image {
      width: 100%;
      height: 0;
      padding-bottom: 50%;
      position: relative;
      overflow: hidden;
    }
    .image img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  </style>
</body>
</html>
Copied!
Copied!

All versions