javascript - 同位素Jquery插件布局问题

我试图在此站点上设置同位素，它需要处理布局，并且我需要能够将项目追加到容器中。

问题是它似乎无法正确初始化图像，这是我如何初始化它:

$(document).ready(function(){

    var $container = $('#container');
    $container.isotope({
          masonry: {
            columnWidth: 400,
            gutterWidth: 10
        },
        filter: '*',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: true
        },
        resizesContainer: true,
    });

    load_more();
});

图像完全不受砌体选项的影响，如果我在CSS中指定“宽度”，则会出现加载问题。

load_more执行ajax调用，并在成功后使用返回的数据调用此函数:

function data_loaded(data) {

    var newItems = "";
    for (var i = 0; i < data['posts'].length; i++) {
        newItems += '<div class="item" ><img class="gallery_img" src="'+data['posts'][i]['images'][0]['path']+'" /></div>';
    }

    /* append images*/
    var $newItemsObj = $(newItems);
    $('#container').isotope( 'insert', $newItemsObj );
}

该网站是http://www.hotchinesebabes.com/
该网站可以安全地工作，没有裸体图片

似乎该站点也需要刷新才能正确加载，我想图像是第二次被捕获，因此由于图像加载之前触发了同位素，它第一次无法通过？

最佳答案

由于尚未加载图像，因此同位素不起作用，因此图像的宽度和高度为0。请使用https://github.com/desandro/imagesloaded或使用CSS固定图像的高度和宽度。

关于javascript - 同位素Jquery插件布局问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19232587/