Javascript 同位素/砌体+；json提要将所有元素加载到左侧

我已经设置好从JSON提要中提取数据，在文档准备就绪时，所有元素都位于左侧，垂直堆叠，而不是在同位素/砌体布局中

如果我通过拉一点宽度来手动调整浏览器窗口，它会重新调整，一切都会正常进行

我遵循这个例子，但结果不一样，我想知道为什么

CSS

#social_container {
    width: 100%;
    padding: 30px;
}
.social_block {
    background-color: #ffffff;
    color: #000;
    width: 320px;
    margin: 5px;
    /*float: left; setting left float doesn't fix the issue*/
}

$(document).ready(function () {
    //
    // initialize at ready ;
    //
    $('#container').isotope({
        itemSelector: '.block'
    });

    var page = 1;


    function loadPage(page) {
                var url = 'http://example.com/getImages/' + page;
                $.getJSON(url, function(data) {
                    var newElements = "";
                    var item_count = 0;
                    //$.each(data.data, function(key, val) { console.log('Data key: ', key, ', Value: ', val)});
                    $.each(data.data, function(index, obj) {
                        var item = obj.Message;
                        newElements +=
                            '<div class="block">' +
                                '<span class="post_image"><img class="lazy" src="' + item.postImageLarge + '" data-original="' + item.postImageLarge + '" /></span>' + 
                            '</div>'; 
                            item_count = item_count + 1;
                            //console.log("items: "+item_count+" page:"+page)
                            if (item_count==20) {
                                page = page + 1;
                                loadPage(page);
                            }
                    });

                    console.log("container width: " + $('#container').width()); //1024px

                    var $newElems = $(newElements);

                    $('#container').append($newElems).imagesLoaded(function () {

                        $('#container').isotope('appended', $newElems);

                        $("img.lazy").lazyload({ 
                            effect : "fadeIn",
                            skip_invisible : false
                        });
                    });
                });
    }

    // Initial run with page empty.
                loadPage(page);

});

JS

#social_container {
    width: 100%;
    padding: 30px;
}
.social_block {
    background-color: #ffffff;
    color: #000;
    width: 320px;
    margin: 5px;
    /*float: left; setting left float doesn't fix the issue*/
}

$(document).ready(function () {
    //
    // initialize at ready ;
    //
    $('#container').isotope({
        itemSelector: '.block'
    });

    var page = 1;


    function loadPage(page) {
                var url = 'http://example.com/getImages/' + page;
                $.getJSON(url, function(data) {
                    var newElements = "";
                    var item_count = 0;
                    //$.each(data.data, function(key, val) { console.log('Data key: ', key, ', Value: ', val)});
                    $.each(data.data, function(index, obj) {
                        var item = obj.Message;
                        newElements +=
                            '<div class="block">' +
                                '<span class="post_image"><img class="lazy" src="' + item.postImageLarge + '" data-original="' + item.postImageLarge + '" /></span>' + 
                            '</div>'; 
                            item_count = item_count + 1;
                            //console.log("items: "+item_count+" page:"+page)
                            if (item_count==20) {
                                page = page + 1;
                                loadPage(page);
                            }
                    });

                    console.log("container width: " + $('#container').width()); //1024px

                    var $newElems = $(newElements);

                    $('#container').append($newElems).imagesLoaded(function () {

                        $('#container').isotope('appended', $newElems);

                        $("img.lazy").lazyload({ 
                            effect : "fadeIn",
                            skip_invisible : false
                        });
                    });
                });
    }

    // Initial run with page empty.
                loadPage(page);

});

你们还能看到我应该用更好的方式编码的其他东西吗？

通过使用

$('#container').isotope({
        itemSelector: '.block',
        masonry: {
          columnWidth: 120
        }
});