Isotope Jquery插件布局問題

Question

我想在這個網站上設置同位素，它需要處理布局，我需要能夠將項目附加到容器。

問題是它似乎沒有正確初始化圖像，這是我如何初始化它：

$(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/ 該網站是安全的工作，沒有裸體圖像

看起來該網站需要刷新才能正確加載，我想這些圖像第二次被捕獲，所以由於在圖像加載之前觸發同位素，它第一次失敗了？

Answer 1

同位素不起作用，因為您的圖像尚未加載，因此圖像的寬度和高度為0.使用https://github.com/desandro/imagesloaded或使用CSS修復圖像的高度和寬度。