JSFiddle - React, Tailwind, and code Playground

by Stas Orekhovskiy

JavaScript

var colCount = 0;
var colWidth = 0;
var margin = 10;
var windowWidth = 0;
var wrapWidth = 0;
var wrapHeight = 0;
var blocks = [];

$(function(){
	$(window).resize(setupBlocks);
});

function setupBlocks() {
	windowWidth = $(window).width();
	colWidth = $('.thumb').outerWidth();
	blocks = [];
	console.log(blocks);
	colCount = Math.floor(windowWidth/(colWidth+margin));
	for(var i=0;i<colCount;i++){
		blocks.push(margin);
	}
	positionBlocks();
	var wrapWidth = (colCount * colWidth) + (margin * colCount);
	var res = windowWidth - wrapWidth;
	$('.thumbs').css({
		'margin-left': (res-10)/2
	});
	var max = Math.max.apply(Math, blocks);
	console.log(max);
	$('.thumbs').css({
		'height': max
	});
}

function positionBlocks() {
	$('.thumb').each(function(){
		var min = Array.min(blocks);
		var index = $.inArray(min, blocks);
		var leftPos = margin+(index*(colWidth+margin));
		$(this).css({
			'left':leftPos+'px',
			'top':min+'px'
		});
		blocks[index] = min+$(this).outerHeight()+margin;
	});
}

// Function to get the Min value in Array
Array.min = function(array) {
    return Math.min.apply(Math, array);
};
$(window).load(setupBlocks);