javascript – Isotope 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修复图像的高度和宽度。
http://stackoverflow.com/questions/19232587/isotope-jquery-plugin-layout-issues

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:javascript – Isotope Jquery插件布局问题