JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<div class="container">
    <img width="120" height="100" src="http://lorempixel.com/120/100?1" />
    <img width="100" height="100" src="http://lorempixel.com/100/100?2" />
    <img width="130" height="100" src="http://lorempixel.com/130/100?3" />
    <img width="100" height="100" src="http://lorempixel.com/100/100?4" />
    <img width="110" height="100" src="http://lorempixel.com/110/100?5" />
    <img width="90" height="100" src="http://lorempixel.com/90/100?6" />
    <img width="100" height="100" src="http://lorempixel.com/100/100?7" />
    <img width="90" height="100" src="http://lorempixel.com/90/100" />
    <img width="150" height="100" src="http://lorempixel.com/150/100" />
    <img width="120" height="100" src="http://lorempixel.com/120/100" />
    <img width="130" height="100" src="http://lorempixel.com/130/100" />
    <img width="140" height="100" src="http://lorempixel.com/140/100" />
    <img width="120" height="100" src="http://lorempixel.com/120/100?13" />
    <img width="140" height="100" src="http://lorempixel.com/140/100?14" />
    <img width="80" height="100" src="http://lorempixel.com/80/100?15" />
    <img width="120" height="100" src="http://lorempixel.com/120/100?16" />
    <img width="110" height="100" src="http://lorempixel.com/110/100?17" />
    <img width="130" height="100" src="http://lorempixel.com/130/100?18" />
</div>

CSS

* {
    padding: 0;
    margin: 0;
}
.container {
    display: flex;
    flex-wrap: wrap;
    max-width: 640px;
    margin: 20px;
    background-color: #8DE;
    padding: 10px 10px 0;
    font-size: 0;
    text-align: justify;
}
.container img {
    height: 100px;
    width: auto;
    vertical-align: top;
    margin-bottom: 10px;
}

.container img:last-child {
    margin-right: 0 !important;
}

JavaScript

/*
var head = document.head || document.getElementsByTagName("head")[0];
var style = document.createElement("style");
head.appendChild(style);

var container = document.querySelector(".container");
var images = container.getElementsByTagName("img");
var ratios = [];

var length = images.length;
var i = 0;
var image;
var minSpacing = 10;
var maxHeight = 100;
var lastWidth;

while (i < length) {
    image = images[i++];
    var width = image.getAttribute("width");
    var height = image.getAttribute("height");
    ratios.push(width / height);
}

function check() {
    var width = container.offsetWidth -  minSpacing;
    if (width == lastWidth) {
        return;
    }
    var css = "";
    var i = 0;
    var rowOffset = i;
    var rowWeight = 0;
    var rowCount = 0;
    var ratio;
    
    while (i < length) {
        ratio = ratios[i++];
        rowCount++;
        rowWeight += ratio;
        var rowHeight = (width - (rowCount * minSpacing)) / rowWeight;
            
        if (rowHeight <= maxHeight) {
            css += ".container > :nth-child(n + " + (rowOffset + 1) + ") { height: " + rowHeight + "px; }";
            if (i < length) {
                rowOffset = i;
            }
            rowWeight = 0;
            rowCount = 0;
        }
    }
    
    if (rowHeight > maxHeight) {
        css += ".container > :nth-child(n + " + (rowOffset + 1) + ") { height: 100px; margin-right: 10px; }";
    }
    else {
        css += " .container:after { content: ''; display: inline-block; width: 100%; }";
    }
    
    if ("textContent" in style) {
      style.textContent = css;
    }
    else {
      style.styleSheet.cssText = css;
    }
    
    lastWidth = width;
    
}

check();

window.addEventListener("resize", check);
*/