Edit in JSFiddle


$(document).ready(function () {
    var $container = $('#container');
    // initialize
    $container.masonry({
        columnWidth: 200,
        itemSelector: '.item'
    });

    $('#more').click(function (e) {
        var types = ['w1', 'w2', 'w3', 'w4'];
        var elems;
        for (var i = 0; i < 3; i++) {
            var elem = $("<div></div>").addClass('item ' + types[Math.floor(Math.random() * types.length)]); 
            elems = elems ? elems.add( elem ) : elem;
        }        

        $container.append( elems );
        $container.masonry('appended',elems);
    });

});
<button id="more" name="more">MORE</button>
<div id="container" >
    <div class="item"></div>
    <div class="item w2"></div>
    <div class="item"></div>
    <div class="item w2"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item w2"></div>
    <div class="item w2"></div>
    <div class="item"></div>
    <div class="item w2"></div>
    <div class="item"></div>
</div>
.item {
    width: 25%;
    height: 150px;
    background: #D8D6D2;
    margin: 5px;
}
.item.w1 {
    width: 35%;
    height: 30px;
    background: #D52600;
    margin: 5px;
}
.item.w2 {
    width: 20%;
    height: 100px;
    background: #AA22CC;
    margin: 5px;
}
.item.w3 {
    width: 20%;
    height: 100px;
    background: #2C2B2A;
    margin: 5px;
}
.item.w4 {
    width: 15%;
    height: 60px;
    background: #4679BD;
    margin: 5px;
}