JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://desandro.github.io/masonry/jquery.masonry.min.js"></script>
<ul id="container" class="masonry">
	<li style="height: 80px;">1</li>
	<li style="height: 100px;">2</li>
	<li style="height: 120px;">3</li>
	<li style="height: 90px;">4</li>
	<li style="height: 110px;">5</li>
	<li style="height: 130px;">6</li>
	<li style="height: 110px;">7</li>
	<li style="height: 90px;">8</li>
	<li style="height: 90px;">9</li>
	<li style="height: 100px;">10</li>
	<li style="height: 95px;">11</li>
	<li style="height: 95px;">12</li>
	<li style="height: 85px;">13</li>
	<li style="height: 115px;">14</li>
	<li style="height: 105px;">15</li>
</ul>

CSS

* {
	margin: 0;
	padding: 0;
}
.masonry li {
	width: 80px;
	float: left;
	line-height: 40px;
	text-align: center;
	font-weight: bold;
	list-style-type: none;
	background: linear-gradient(to bottom,  #eeeeee 0%,#a58b59 100%); /* W3C */
}

JavaScript

$.Mason.prototype._placeBrick = function(e) {
	var n = $(e),
		r, i, s, o, u;
	r = Math.ceil(n.outerWidth(!0) / this.columnWidth), r = Math.min(r, this.cols);
	if (r === 1) s = this.colYs;
	else {
		i = this.cols + 1 - r, s = [];
		for (u = 0; u < i; u++) o = this.colYs.slice(u, u + r), s[u] = Math.max.apply(Math, o)
	}
	var a = Math.min.apply(Math, s),
		f = 0;
	for (var l = 0, c = s.length; l < c; l++)
		if (s[l] === a) {
			f = l;
			break
		}
	/* Add new calculation, what column next brick is in: */
	f = $(e).index() % this.cols;
    a = s[f];
	/* END of customizing */
	var h = {
		top: a + this.offset.y
	};
	h[this.horizontalDirection] = this.columnWidth * f + this.offset.x, this.styleQueue.push({
		$el: n,
		style: h
	});
	var p = a + n.outerHeight(!0),
		d = this.cols + 1 - c;
	for (l = 0; l < d; l++) this.colYs[f + l] = p;
};
$('#container').masonry({
	columnWidth: 80,
	itemSelector: 'li'
});