index.html

<style>
  main {
    width: 100%;
    display: flex;
  }
  .column {
    flex-basis: 0;
    flex-grow: 1;
  }
  img {
    display: block;
    width: 100%;
  }
</style>
<main>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</main>
<script>
  const imageURLs = [];
  for (let i = 0; i < 40; i++) {
    const width = 100 + Math.floor(Math.random() * 500);
    const height = 200 + Math.floor(Math.random() * 300);
    const kittenURL = `https://placekitten.com/${width}/${height}`;
    // const svg = `<svg viewbox="0 0 ${width} ${height}"><image href="${kittenURL}" width="${width}" height="${height}" x="0" y="0" /></svg>`;
    // const svgURL = `data:image/svg+xml;utf8,${svg}`;
    imageURLs.push(kittenURL + '?index=' + i);
  }
  function updateIndicators() {
    const images = [...document.getElementsByTagName('img')];
    [...document.getElementsByTagName('span')].forEach(span => {
      document.body.removeChild(span);
    })
    images.forEach(img => {
      const rect = img.getBoundingClientRect();
      const index = imageURLs.indexOf(img.src);
      const display = document.createElement('span');
      display.textContent = `${index}`;
      display.style.position = 'fixed';
      display.style.top = rect.top;
      display.style.left = rect.left;
      display.style.fontSize = '40px';
      display.style.background = 'white';
      document.body.appendChild(display);
    });
    window.requestAnimationFrame(updateIndicators);
  }
  window.requestAnimationFrame(updateIndicators);
</script>
<script src="pinterest.js"></script>

pinterest.js

// render images in the columns, in order, always appending
// images to the current shortest column

// the image dimensions vary, and we don't know them in advance

// const imageURLs = [
//   'example.jpg',
//   'example2.jpg',
//   ...
// ];

const columns = [...document.querySelectorAll('.column')];

async function waitForLoad(img) {
  await new Promise((resolve, reject) => {
    img.addEventListener('load', resolve);
    img.addEventListener('error', reject);
  });
  return img;
}

function createImage(url) {
  const img = document.createElement('img');
  img.src = url;
  return img;
}

function getImageHeight(img) {
  return img.clientHeight;
}

// TODO: replace this loop
for (const imageURL of imageURLs) {
  columns[0].appendChild(createImage(imageURL));
}