JSFiddle - React, Tailwind, and code Playground

by crysfel

HTML

<script src="http://masonry.desandro.com/masonry.pkgd.js"></script>
<h1>Masonry - agregar elementos</h1>
<p><button id="append-button">Cargar</button>
<div class="masonry">
</div>

CSS

.masonry{
    width:100%;
    overflow:auto;
}
.item{
    float:left;
    width:22%;
    margin:5px;
    border:1px solid #ccc;
}

.h1{height:30px;}
.h2{height:40px;}
.h3{height:70px;}
.h4{height:50px;}
.h5{height:60px;}

JavaScript

var Sample = {
    init : function(){
        var me = this,
            container = document.querySelector('.masonry'),
            button = document.querySelector('button'),
            msnry = new Masonry( container, {
              columnWidth: 60
            });
        
        button.addEventListener('click',function(){
            //Ajax aquí! el siguiente código en el callback
            //de la respuesta ajax
            // create new item elements
            var elems = [];
            var fragment = document.createDocumentFragment();
            for ( var i = 0; i < 5; i++ ) {
                var elem = me.getItemElement();
                fragment.appendChild( elem );
                elems.push( elem );
            }
            
          // append elements to container
          container.appendChild( fragment );
          // add and lay out newly appended elements
          msnry.appended( elems );
        });
    },
    
    getItemElement : function() {
      var elem = document.createElement('div');
      var heightClass = 'h' + (Math.floor(Math.random()*5) + 1);

      elem.className = 'item ' + heightClass;
      return elem;
    }
}


Sample.init();