同位素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修復圖像的高度和寬度。