JSFiddle - React, Tailwind, and code Playground

by richarmstrong

HTML

<script src="https://raw.github.com/desandro/masonry/master/jquery.masonry.min.js"></script>
<html>
    <head>
    </head>
    <body>
        
<div id=container>
    <div class="item tall"></div>
    <div class="item wide"></div>
    <div class="item tall"></div>
    <div class="item wide"></div>
    
</div>
    <input type=submit id=additem value=Add>
    <input type=submit id=masonry value=Masonry>
        <br/>
To replicate: Click "Add" a few times, then "Masonry"
        <br/>
Result: Added items are included in the Masonry call.
        <br/>
       
Next: Click "Masonry", then "Add" a few times, then "Masonry" again.        
        <br/>
Result: Added items are not included in the Masonry call.
        <br/>
Expected Result: All div.item children of div#container should be shuffled.
    </body>
</html>

CSS

#container {
    border: 1px black solid;
    width:300px;
    height:500px;
    min-height:500px;
}

.wide {
    border: 4px #3f3 solid;
    width:60px;
    height:20px;
}

.tall {
    border: 4px #33f solid;
    width:20px;
    height:60px;
}

JavaScript

var add_type = 'tall';
$(function(){
   
    $('#masonry').click(function() {
        $('#container').masonry({
  itemSelector: '.item',
  columnWidth: 10,
  isAnimated: true
});
    });

    $('#additem').click(function() {
        if (add_type == 'wide') {
            add_type = 'tall';
        } else {
            add_type = 'wide';
        }
        $('<div>').addClass(add_type)
            .addClass('item')
            .val('A')
            .appendTo($('#container'));
    });

});