JSFiddle - React, Tailwind, and code Playground

by robert_schutt

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/masonry/3.3.0/masonry.pkgd.min.js"></script>
<!-- PAGE 1 begins -->
	<div data-role="page" id="gallery" data-theme="a">			
		<!-- CONTENT -->
		<div data-role="main">
			<div class="galleryContainer" id="gc1">
				<!-- <div class='imgContainer'>
                    <div><a href='#'><img src="#" style="background-color:blue;width:300px;height:300px"/></a></div>
				</div>
				<div class='imgContainer'>
                    <div><a href='#'><img src="#" style="background-color:yellow;width:300px;height:600px"/></a></div>
				</div>
				<div class='imgContainer'>
                    <div><a href='#'><img src="#" style="background-color:red;width:300px;height:600px"/></a></div>
				</div> -->
			</div>
		</div>
		
		<!-- FOOTER -->
		<div data-role="footer" class="footer">
			<div >footer</div>
		</div>	
	</div>
<!-- PAGE 1 ENDS -->

CSS

.imgContainer{ float:left; padding: 5px; }
.footer{ clear:both; }

JavaScript

var gc1 = document.getElementById('gc1');
for (var i=0; i<50; i++) {
    var nb = document.createElement('div');
    nb.className = 'imgContainer';
    var ni = document.createElement('img');
    ni.style.width = '100px';
    ni.style.height = (100 + 10 * Math.floor(Math.random()*51)) + 'px';
    ni.style.backgroundColor = 'rgb(' + (Math.floor(Math.random()*256)) + ',' + (Math.floor(Math.random()*256)) + ',' + (Math.floor(Math.random()*256)) + ')';
    nb.appendChild(ni);
    gc1.appendChild(nb);
}

var msnry = new Masonry( '.galleryContainer', { // note it only works for 1
  columnWidth: 110, // 100 + 2 * 5 (padding)
  itemSelector: '.imgContainer'
});