同位素 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/ http://www.hotchinesebabes.com/ 该网站工作安全，没有裸照

该网站似乎还需要刷新才能正确加载，我猜图像是第二次捕获的，因此由于在图像加载之前触发同位素而第一次失败？

同位素将不起作用，因为您的图像尚未加载，因此图像的宽度和高度均为 0。使用https://github.com/desandro/imagesloaded https://github.com/desandro/imagesloaded或者使用 CSS 修复图像的高度和宽度。