JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
        <div id="main">
            
            
            <div class="container">
                <img src="http://s4ty-testarea.s4.ohost.de/jQuery-board/images/001.jpg"/>
            </div>
            <div class="container">
                <img src="http://s4ty-testarea.s4.ohost.de/jQuery-board/images/004.jpg"/>
            </div>
            <div class="container">
                <img src="http://s4ty-testarea.s4.ohost.de/jQuery-board/images/001.jpg"/>
            </div>
            
            
            <div class="container">
                <img src="http://s4ty-testarea.s4.ohost.de/jQuery-board/images/004.jpg"/>
            </div>
            <div class="container">
                <img src="http://s4ty-testarea.s4.ohost.de/jQuery-board/images/006.jpg"/>
            </div>
            <div class="container">
                <img src="http://s4ty-testarea.s4.ohost.de/jQuery-board/images/003.jpg"/>
            </div>
            
            
            <div class="container">
                <img src="http://s4ty-testarea.s4.ohost.de/jQuery-board/images/001.jpg"/>
            </div>
            <div class="container">
                <img src="http://s4ty-testarea.s4.ohost.de/jQuery-board/images/003.jpg"/>
            </div>
            <div class="container">
                <img src="http://s4ty-testarea.s4.ohost.de/jQuery-board/images/005.jpg"/>
            </div>

            
            <div class="container">
                <img src="http://s4ty-testarea.s4.ohost.de/jQuery-board/images/001.jpg"/>
            </div>
            <div class="container">
                <img src="http://s4ty-testarea.s4.ohost.de/jQuery-board/images/004.jpg"/>
            </div>
            <div class="container">
                <img src="http://s4ty-testarea.s4.ohost.de/jQuery-board/images/005.jpg"/>
            </div>
            
            
        <div>
    </body>
</html>

CSS

body, #main{ background: #000;}
.container{ width: 100px; height: 100px; background: #000; float: left; overflow: hidden; opacity: 0.2; position: absolute;}

JavaScript

$(function (){

    var w = Math.round($(document).width() / 3) - 7,  //-7 wegen Scrollbalken //Breite viewport
        h = $(document).height(), //Höhe viewport
        max = 3, // 3 Elemente nebeneinander maximal
        curr = 0; //aktuelles Element
        $('.container').each(function (i,v){
            var h = Math.floor((Math.random()*300)+100), //Zum testen für mich eine Zufällige höhe ...wird später vom content selbst definiert
                l = curr++*w, // left = breite des Element + der Position 
                prev = $('.container').eq(i-max), // Element aus der Ebene darüber
                t = (i<max) ? 0 : prev.height() + parseInt(prev.css('top'),10) || 0; //Wenn nicht erste Reihe muss ich die Höhe + den Top wert addieren 
            
            //alert(t);
            
            $(v).css( // Werte setzen
                {
                    width: w, 
                    height: h,
                    left: l,
                    top: t
                }
            )
                .find('img').css({height: h, width: w}); // Nicht Relevant...nur für das Beispiel damit die Bilder nicht so behindert aussehen xD...verwende ja immer die selben :..(
            curr = (max>curr)?curr:0;    // wechselt immer zwischen 0,1,2
        })
        .hover( // Kleiner Hover-Effekt...
            function(){
                $(this).animate({opacity: 1}, 200);
            },
            function(){
                $(this).animate({opacity: 0.2}, 200);
            }
        )
            
    
})