JSFiddle - React, Tailwind, and code Playground
HTML
<div id="posts">
<div style="width:250px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:100px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:170px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:120px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:110px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:130px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:140px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:180px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:190px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:210px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:90px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:150px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:150px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:150px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:150px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:150px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:150px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:150px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:150px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:150px;background: #ccc;height:20px;margin:3px;"></div>
</div>
CSS
div div { float:left }
JavaScript
var lisInRow = 0;
var lisInRow2 = 0;
var row = 0;
$('div div').each(function() {
if($(this).prev().length > 0) {
if($(this).position().top != $(this).prev().position().top) row++;
lisInRow++;
$(this).addClass("row"+row);
//console.log($(this).prev().length)
}
else {
lisInRow++;
$(this).addClass("row0");
}
});
for(var i=0;i<=row;i++){
var itemNumber = $(".row"+i).length
console.log(row);
var widthRow = 0;
$(".row"+i).each(function() {
widthRow += $(this).outerWidth( true );
});
var widthContainer = $("#posts").width();
var remaining = widthContainer - widthRow;
leftMargin = Math.floor(remaining / itemNumber);
$(".row"+i).each(function(){
var addedwidth = $(this).width() + leftMargin;
$(this).width(addedwidth);
$(this).find("img").width(addedwidth);
});
}