JSFiddle - React, Tailwind, and code Playground

by Stas Orekhovskiy

HTML

<script src="//cdn.jsdelivr.net/masonry/3.1.5/masonry.min.js"></script>
<div class="kesif-wrp">
 <div class="kesif-alani">
   <div class="kesif-gonderiler">
     <div class="posts-holder" >
       <div class="kesif-gonderi-alani" style="height:300px;">1</div>
       <div class="kesif-gonderi-alani" style="height:400px;">2</div>
       <div class="kesif-gonderi-alani" style="height:400px;">3</div>
     </div>
   </div>
 </div>
</div>
<button style='position:absolute; top:0; left:0' class='more'>More ... </button>

CSS

body {
	background-color:#323949;
	font-family: 'mstfont' !important;
	margin: 0px ;
    padding: 0px;
	min-width:100%;
	height: 100%;
	-webkit-font-smoothing: antialiased;
}
.kesif-wrp {
padding: 53px 0 0;
width: 100%;
position: relative;
}
.kesif-alani {
padding: 20px 0 50px;
margin: 36px auto 0;
position: relative;
max-width: 1620px;
min-width: 960px;
}
.kesif-gonderiler {
color: #444;
}
.kesif-gonderi-alani{
  width:300px;
  background-color:#ffffff;
  border-radius:3px;
  -webkit-border-radius:3px;
  -o-border-radius:3px;
  -moz-border-radius:3px;
  margin:10px;
}
.posts-holder {
  position:relative;
margin: 10px auto;
}
.kesif-gonderi-alani:nth-child(30n+1) {
    background: #ff0000;
}

JavaScript

$( function() {
    
var $container = $('.posts-holder');
    $container.masonry({
      isFitWidth: true,
      itemSelector: '.kesif-gonderi-alani'
    });

  $('.more').click(function(){

      var html = '<div class="kesif-gonderi-alani">4<br>4</div>' + '<div class="kesif-gonderi-alani">555<br>555<br>555<br></div>' + '<div class="kesif-gonderi-alani">666666666666666<br><br>666666666666666<br><br>666666666666666<br><br>666666666666666<br><br>666666666666666<br><br></div>';
      
    $("div.posts-holder").append(html).each(function(){
   			$('.posts-holder').masonry('reloadItems');
 		});
      
      $container.masonry();
      
  })
  
});