<div class="pull">
    <div class="pullBox"><img src="img/1.jpg" alt=""></div>
    <div class="pullBox"><img src="img/2.jpg" alt=""></div>
    <div class="pullBox"><img src="img/3.jpg" alt=""></div>
    ...........
</div>

    var aa=$('.pull').masonry({
        itemSelector:'.pullBox',  //選擇其子元素（必選）
        columnWidth:300,           //規定其一個盒子的寬度(必選）
        gutter ： 30,          //設定其每個盒子之間的橫向距離，縱向距離在css中設定就行
        horizontalOrder: true ,   //使內容都從左到右
        transitionDuration: 1000,  //當改變視口大小後，需要多少時間來調整的動畫效果
        stagger: 0,       //當列間隙發生改變後，需要多少秒的判定，才進入transitionDuration(整合效果)
        resize:false  //當視口發生改變時，盒子是否會進行調整，預設為true
    })
    // 給予圖片載入完畢才出現的外掛方法
    aa.imagesLoaded().progress( function() {
        aa.masonry('layout');
    });

   //點選盒子，刪除自身
    $('.pull').on('click','.pullBox',function () {
        aa.masonry('remove',this).masonry('layout')
    })
    //點選按鈕，增加盒子
    $('button').on('click',function () {
        var ran=Math.ceil(Math.random()*70);
        var box='<div class="pullBox"><img src="img/'+ran+'.jpg"</div>'
        box=$(box);
        aa.append(box).masonry('appended',box)
        aa.imagesLoaded().progress(function () {
            aa.masonry('layout');
        }) })