JSFiddle - React, Tailwind, and code Playground

by Ayri Rin

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="gallery">
  <img src="https://ostriv.pp.ua/photo/0.jpg">
  <img src="https://ostriv.pp.ua/photo/1.jpg">
  <img src="https://ostriv.pp.ua/photo/2.jpg">
  <img src="https://ostriv.pp.ua/photo/3.jpg">
  <img src="https://ostriv.pp.ua/photo/4.jpg">
  <img src="https://ostriv.pp.ua/photo/5.jpg">
  <img src="https://ostriv.pp.ua/photo/6.jpg">
  <img src="https://ostriv.pp.ua/photo/7.jpg">
  <img src="https://ostriv.pp.ua/photo/8.jpg">
  <img src="https://ostriv.pp.ua/photo/9.jpg">
  <img src="https://ostriv.pp.ua/photo/10.jpg">
  <img src="https://ostriv.pp.ua/photo/11.jpg">
  <img src="https://ostriv.pp.ua/photo/12.jpg">
  <img src="https://ostriv.pp.ua/photo/13.jpg">
  <img src="https://ostriv.pp.ua/photo/14.jpg">
  <img src="https://ostriv.pp.ua/photo/15.jpg">
  <img src="https://ostriv.pp.ua/photo/16.jpg">
  <img src="https://ostriv.pp.ua/photo/17.jpg">
  <img src="https://ostriv.pp.ua/photo/18.jpg">
  <img src="https://ostriv.pp.ua/photo/19.jpg">
  <img src="https://ostriv.pp.ua/photo/20.jpg">
</div>

CSS

body {
  padding: 2px 0 0 2px;
}

.gallery img {
  float: left;
  padding: 0 2px 2px 0;
  /* Yes, you *can* adjust/remove padding. */
}

JavaScript

function scaleGallery()
{
  // This is roughly the max pixels width/height of a square photo
  var widthSetting = 400;
  
  // Do not edit any of this unless you know what you're doing
  var containerWidth = $(".gallery").width();
  var ratioSumMax = containerWidth / widthSetting;
  var imgs = $(".gallery img");
  var numPhotos = imgs.length, ratioSum, ratio, photo, row, rowPadding, i = 0;

  while (i < numPhotos) {
    ratioSum = rowPadding = 0;
    row = new Array();
    while (i < numPhotos && ratioSum < ratioSumMax) {
        photo = $(imgs[i]);
        // reset width to original
        photo.width(""); 
        ratio = photo.width() / photo.height();
        rowPadding += getHorizontalPadding(photo);
        // if this is going to be first in the row, clear: left
        if(ratioSum == 0) photo.css("clear", "left"); else photo.css("clear", "none");
        ratioSum += ratio;
        row.push(photo);
        i++;
        // if only 1 image left, squeeze it in
        if(i == numPhotos - 1) ratioSumMax = 999;
    }
    unitWidth = (containerWidth - rowPadding) / ratioSum;

    row.forEach(function (elem) {
      elem.width(unitWidth * elem.width() / elem.height());
    });
  }
}

function getHorizontalPadding(elem)
{
    var padding = 0;
    var left = elem.css("padding-left");
    var right = elem.css("padding-right");
    padding += parseInt(left ? left.replace("px", "") : 0);
    padding += parseInt(right ? right.replace("px", "") : 0);
    return padding;
}
scaleGallery();