JSFiddle - React, Tailwind, and code Playground

by bartjeeuhh

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<div class="container">
    <div class="grid">
            <div class="imgholder">
              <img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img27.jpg"/>
            </div>
            <strong>Testje</strong>
    </div>
    <div class="grid">
            <div class="imgholder">
              <img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img26.jpg"/>
            </div>
            <strong>Testje</strong>
    </div>
    <div class="grid">
            <div class="imgholder">
              <img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img15.jpg"/>
            </div>
            <strong>Testje</strong>
    </div>
    <div class="grid">
            <div class="imgholder">
              <img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img17.jpg"/>
            </div>
            <strong>Testje</strong>
    </div>
    <div class="grid">
            <div class="imgholder">
              <img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img27.jpg"/>
            </div>
            <strong>Testje</strong>
    </div>
    <div class="grid">
            <div class="imgholder">
              <img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img26.jpg"/>
            </div>
            <strong>Testje</strong>
    </div>
    <div class="grid">
            <div class="imgholder">
              <img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img15.jpg"/>
            </div>
            <strong>Testje</strong>
    </div>
    <div class="grid">
            <div class="imgholder">
              <img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img17.jpg"/>
            </div>
            <strong>Testje</strong>
    </div>
 
    
</div>

CSS

.grid{
	width:188px;
	min-height:100px;
	color: #fff;
	background:#5a9aa8;
	margin:8px;
	font-size:12px;
	float:left;
	-webkit-transition: top 1s ease, left 1s ease;
	-moz-transition: top 1s ease, left 1s ease;
	-o-transition: top 1s ease, left 1s ease;
	-ms-transition: top 1s ease, left 1s ease;
}

.grid strong {
	
	margin:10px 0;
	display:block;
	padding:0 0 5px;
	font-size:17px;
}
.grid .meta{
	text-align:right;
	color:#777;
	font-style:italic;
}
.grid .imgholder img{
	max-width:100%;
	background:#ccc;
	display:block;
}

JavaScript

$(document).ready(function(){
   $('.container').isotope({
  masonry: {
    columnWidth: 30
  }
});
    var page = 1;
    var div = "<div class='grid'><div class='imgholder'><img src='http://www.inwebson.com/demo/blocksit-js/demo2/images/img17.jpg'/></div><strong>Testje</strong></div>";
    $(window).scroll(function(){
       if($(window).scrollTop() + $(window).height() > $(document).height() - 100)
       {
            
           $('.container').append(div).isotope('appended', div);
           
       }
    });
});