同位素/砌体+ json饲料加载所有元素到左边

isotope/masonry + json feed loading all elements to the left

本文关键字:元素 左边 加载 砌体 json 同位素      更新时间:2023-09-26

我有同位素设置从JSON提要中拉入数据,并在文档准备就绪,它有坐在左边的所有元素,垂直堆叠而不是在同位素/砌体布局。

如果我手动调整浏览器窗口的宽度,它会重新调整,一切都是应该的。

我遵循这个例子http://jsfiddle.net/E7ZRW/37/但结果是不一样的,我想知道为什么?

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*/
}

JS

$(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);
});

编辑:我想我通过在同位素初始化选项中设置这个来解决它:

masonry: {
          columnWidth: 120
        }

你们还能看到我应该以更好的方式编码吗?

使用

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