JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="liParent" style="width: 500px;"><li class="imgs" id="apple-img"><img src="http://farm6.static.flickr.com/5215/5397263588_11f6d96f61.jpg" style="width: 133.333px; height: auto;"></li><li class="imgs" id="mango-img"><img src="http://farm1.static.flickr.com/24/51827649_35f9828930.jpg" style="height: 166.667px; width: auto;"></li>
    <li class="imgs" id="coconut-img"><img src="http://farm5.static.flickr.com/4123/4815465599_365cd9859f.jpg" style="height: 166.667px; width: auto;"></li>
    <li class="imgs" id="pumpkin-img"><img src="http://farm6.static.flickr.com/5290/5368052053_ea57399de2.jpg" style="width: 166.667px; height: auto;"></li>
    <li class="imgs" id="ginger-img"><img src="http://farm6.static.flickr.com/5128/5325116954_3d005521ae.jpg" style="width: 166.667px; height: auto;"></li>
    <li class="imgs" id="rice-img"><img src="http://farm6.static.flickr.com/5243/5369579432_7068a0d791.jpg" style="width: 126.667px; height: auto;"></li>
    <li class="imgs" id="apple-img"><img src="http://farm6.static.flickr.com/5215/5397263588_11f6d96f61.jpg" style="width: 133.333px; height: auto;"></li><li class="imgs" id="apple-img"><img src="http://farm6.static.flickr.com/5215/5397263588_11f6d96f61.jpg" style="width: 133.333px; height: auto;"></li><li class="imgs" id="mango-img"><img src="http://farm1.static.flickr.com/24/51827649_35f9828930.jpg" style="height: 166.667px; width: auto;"></li><li class="imgs" id="coconut-img"><img src="http://farm5.static.flickr.com/4123/4815465599_365cd9859f.jpg" style="height: 166.667px; width: auto;"></li><li class="imgs" id="pumpkin-img"><img src="http://farm6.static.flickr.com/5290/5368052053_ea57399de2.jpg" style="width: 166.667px; height: auto;"></li><li class="imgs" id="ginger-img"><img src="http://farm6.static.flickr.com/5128/5325116954_3d005521ae.jpg" style="width: 166.667px; height: auto;"></li><li class="imgs" id="rice-img"><img src="http://farm6.static.flickr.com/5243/5369579432_7068a0d791.jpg" style="width: 126.667px;...

CSS

#liParent {
    position: relative; display:inline;
}

#liParent li { margin: 0; padding: 0; }

.imgs {
    float : left;
}

JavaScript

window.onload = function() {
    var oList = document.getElementById("liParent")
    var arrItems = oList.getElementsByTagName("li");
    var totalWidth = parseInt(oList.style.width, 10);
    var curLeft = 0;
    var curTop = 0;
    var arrHeights = new Array();
    var colIndex = 0;
    for (var i = 0; i < arrItems.length; i++) {
        var oCurItem = arrItems[i];
        var oImage = oCurItem.getElementsByTagName("img")[0];
        oCurItem.style.position = "absolute";
        var curWidth = oImage.offsetWidth;
        var curHeight = oImage.offsetHeight;
        if (curLeft + curWidth > totalWidth) {
            curLeft = 0;
            colIndex = 0;
        }
        if (colIndex < arrHeights.length)
            curTop = arrHeights[colIndex];
        oCurItem.style.left = curLeft + "px";
        oCurItem.style.top = curTop + "px";
        arrHeights[colIndex] = (curHeight + curTop);
        curLeft += curWidth;
        colIndex++;
    }
}