瀑布流控件（jquery masonry）使用的一些有关问题：清空容器里的内容 追加新内容出现空白区域

瀑布流控件（jquery masonry）使用的一些问题：清空容器里的内容 追加新内容出现空白区域
不知道大家对瀑布流控件（jquery masonry）是否熟悉

我的问题：

页面加载 异步从数据库取30条数据，用json格式抛到前台，前台解析好后，遍历输出，效果如图1，一切正常，如果再取数据append到后面也没问题。问题是清空页面所有内容，重新追加到页面上就有问题了，留出很大区域空白，并且每次点击会越来越高  如图2所示
（chrome，ie里正常，ff，sogou等浏览器都有如图所示问题）






首次加载代码：

            $(function () {
            //首次加载：
            $.ajax({
                url: "getJson.ashx",
                type: "post",
                data: { hideIndex: 1, dsid: 0 },
                dataType: 'json',
                success: function (data) {
                    $.each(data, function (i, data) {
                        var $boxes = $('<div class="box cell"><div class="t"><div class="img"><strong class="jia">' + '&yen; ' + data["spPrice"] + '</strong><a href="' + data["spUrl"] + '" target="_blank"><img src="' + data["spImage"] + '"/></a><a href="" class="ilike">赞</a></div><div class="zan"><strong>' + data["Splook"] + '</strong><span class="notify">赞+1</span><input type="hidden" id="productIdHidden" value= "' + data["spid"] + '" /><span>来自：<b>' + data["dsName"] + '</b></span></div></div><div class="b"><a href="' + data["spUrl"] + '" target="_blank">' + data["spName"] + '</a></div></div>');
                        $("#container").append($boxes).masonry('appended', $boxes, true);

                    })

                    var $img = $('#container img');
                    $img.load(function () {
                        $('#container').masonry();
                    });
                }
            });
        })

按钮点击代码：

            $(function () {