JSFiddle - React, Tailwind, and code Playground

Pinterest Solution

by Ttt Yyy

HTML

<ul id="pinboard" class="pinboard"></ul>
<div id="console" />

CSS

ul#pinboard {
    height: 400px;
    margin: 10px;
    position: relative;
    
}

ul.pinboard li {
    border: 1px solid red;
/*     background-color: #333; */
    background-color: light-gray;
    margin: 10px;
    position: absolute;
    width: 150px;
}
ul.pinboard li img {
    vertical-align: bottom;
}

JavaScript

/* (function() {
    var query = 'burger';
    window['h'] = function(response) {
        var data = response && response.responseData;
        if (data) {
            var results = data.results;
            if (results && results.length) {
                processImages(results);
            };

        }
    }
    var script = document.createElement('script');
    script.src = 'https://ajax.googleapis.com/ajax/services/search/images?v=1.0&' + 'q='+query + '&callback=h&imgsz=small|medium|large&imgtype=photo&rsz=8&safe=active'
    document.body.appendChild(script);
})();
 */

function processImages(images) {

    // Fixed width (hard-coded margin)
    var width = 160;

    // Create an array of column heights, initialize to 0.
    var heights = new Array(3);
    var l = heights.length;``
    while (l--) {
        heights[l] = 0;
    }

    // Finds the shortest column from the saved heights.

    function getShortestColumn() {
        var min = 0;
        for (var i = 1, l = heights.length; i < l; i++) {
            if (heights[i] < heights[min]) {
                min = i;
            }
        }
        return min;
    }
    
    function displayImage(img) {
        var li = document.createElement('li');
        li.appendChild(img);
        pinboard.appendChild(li);
        
        var column = getShortestColumn();
        var height = getItemHeight(img);

        li.style.left = (column * width) + 'px';
        li.style.top = heights[column] + 'px';

        heights[column] += height;
    }
    
    var loadedImages = new Array(images.length);
    var lastDisplayed = 0;
    function onImageLoad(img, i) {
        loadedImages[i] = img;
        for (var j = lastDisplayed; j < loadedImages.length; j++) {
            if (loadedImages[j]) {
            		let console = document.getElementById('console')
                console.innerHTML += j + '...'
                displayImage(loadedImages[j]);
            } else {
                lastDisplayed = j;
               ...