Masonry Test

Test dynamically showing new differently sized objects with Masonry plugin

by doug65536

HTML

<div id="container">
    <div class="smalltile">small</div>
    <div class="bigtile">big</div>
    <div class="smalltile">small</div>
    <div class="bigtile">big</div>
    <div class="smalltile">small</div>
    <div class="bigtile">big</div>
    <div class="smalltile">small</div>
    <div class="bigtile">big</div>
    <div class="smalltile">small</div>
    <div class="bigtile">big</div>
    <div class="smalltile">small</div>
    <div class="bigtile">big</div>
    <div class="smalltile">small</div>
    <div class="bigtile">big</div>
    <div class="smalltile">small</div>
    <div class="bigtile">big</div>
    <div class="smalltile">small</div>
    <div class="bigtile">big</div>
    <div class="smalltile">small</div>
    <div class="bigtile">big</div>
    <div class="smalltile">small</div>
    <div class="bigtile">big</div>
    <div class="smalltile">small</div>
    <div class="bigtile">big</div>
</div>

CSS

.smalltile {
    /*display: inline-block;*/
    width: 64px;
    height: 64px;
    border: solid black 1px;
    background-color: blue;
    margin: 0px;
    padding: 0px;
}
.bigtile {
    /*display: inline-block;*/
    position: relative;
    width: 130px;
    height: 130px;
    border: solid black 1px;
    background-color: red;
    margin: 0px;
    padding: 0px;
}
.hidden {
    display: none;
}

JavaScript

$(function () {
    $.getScript('//cdnjs.cloudflare.com/ajax/libs/masonry/3.0.0/masonry.pkgd.js',
    //$.getScript('http://cdn.jsdelivr.net/masonry/3.1.1/masonry.js',

    function () {
        var m = new Masonry(document.getElementById('container'), {
            itemSelector: 'div'
        });
    });
    
    $('.bigtile').addClass('hidden');
    
    var alltiles = $('#container div');
    var dettiles = $('#container .bigtile');
    $("#container div").on('click', function() {
        dettiles.addClass('hidden');
        $(this).next('div').removeClass('hidden');
        
        var m = new Masonry(document.getElementById('container'), {
            itemSelector: 'div'
        });
    });
});