What is it?
While converting a website from WordPress to Hugo and needed an equivalent to the Tiled Image Gallery from Wordpress. I wanted the Tiled Mosaic style, but that was a little too complex, as it also contains colspans. I came up with this as an alternative.
How to use it?
It requires only Javascript and a simple HTML structure, as illustrated below:
<div class="mosaic-gallery">
<a href="full_img.jpg">
<img ratio="0.666" src="thumb_img.jpg" />
</a>
...
</div>
<script src="mosaic.js"></script>
Caveats
The hardest part of using this code is determining the image ratio of every image before rendering. Any server side language (like PHP) can generate these image ratios though, as can Hugo. Knowing the image ratio before loading the images prevents layout shifts and ensures a smooth loading experience.
Features
This whole javascript is only a few kilobytes large, so it loads relatively quickly. It is fully responsive and has a debounce function that limits the redraws to 50ms, preventing it from being CPU-heavy. Aestheticly, it aims for about 1 image every 700px of width. The images always fill out nicely and the code prevents subpixel issues. Images have a minimum size, which turns the gallery into a list of images on mobile.
License
This code is licensed WTFPL.