アイソトープ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(); 
}); 

画像は石工のオプションによってcompletly影響を受けず、そして私は「幅」を指定した場合に私の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/ ある

サイトが正しく読み込まれるように更新する必要があるようですが、画像が2度目にキャッチされると思いますので、画像読み込みに先立ってアイソトープをトリガするために初めて失敗しますか？

Answer 1

画像がまだ読み込まれていないため、画像の幅と高さが0であるため、アイソトープが機能しません。https://github.com/desandro/imagesloadedを使用するか、CSSで画像の高さと幅を固定してください。