は、スクロール上の未知のサイズの怠惰な負荷画像イメージギャラリーを実装し、それらを最適に

Question

を配置し、私は以下のスペックでイメージギャラリーを実装する必要があります。

1. 画像は最大高さと幅を持っている必要があります。アスペクト比をこの範囲内に保ちます。最大サイズの制約後の画像の最終的なサイズに基づいて

2. は、空の空白スペースを減らす方法で、ページ上でそれらを注文します。

3. コンテナが下にスクロールするにつれ、より多くの画像を読み込みます。私は、このような すべてのlib masonryこの lay loadとして研究している

ライブラリは、幅と高さは事前に知られることを期待しています。

私がページ上に配置する前に、幅と高さのparamsを取得するために、目に見えない状態でのイメージのロードに頼る必要があるかもしれないと思われます。 これは '石積み'の側面に役立ちますが、遅延ロードメカニズムと矛盾します。

正しい方向のポインタがあれば分かります。

Answer 1

私は現在、Masonryを使用しており、お客様のニーズに合っていると思います。私は異なる幅の&の高さの画像を持っています。固定幅の最大幅（ページ幅に合わせて固定幅）で読み込んだ後、空白を避けて画像のアスペクト比を維持するためにレイアウトを並べ替えます。私がページの一番下に来ると、私は（手動で）より多くのアイテムを読み込みます。これはここで、すべての画像にLazyLoadを追加するのは簡単ですあなたが次に

（ベータ版ページがある）http://pintevent.comで結果を確認することができます私のコード

//Load the first page 
loadMore(1); 

function loadMore(page){ 
    var div = ""; 
    var html = ""; 
    var item_num = 1 + ((page-1)*10); 

    $('.loader').show(); 
    $('#container').hide(); 

    $.post("loadMore.php", {'page':page }, function(data) { 
     data=JSON.parse(data); 
     $.each(data, function (key,value) { 
      //here create the div with the data 
      html = html + div;                 
      item_num++; 
     }); 

     $("#container").append(html).each(function(){        
     $('#container').masonry().masonry('reloadItems'); 
     });    

     var $container = $('#container'); 
     $container.imagesLoaded(function(){ 
      $('#container').masonry(); 
     }); 

     $('.loader').fadeOut('fast',function(){ 
     $(this).remove().delay(1500); 
     }); 
     $('#container').show();       

    }); 
} 

//On bottom page, load more images 
$(window).scroll(function() { 
    if (ready && $(document).height() <= $(window).scrollTop() + $(window).height()) { 
     ready = false; //Set the flag here 

     setTimeout(function(){ 
     loadMore(page);     
     page++; 
     },1000); 

     ready = true; //Set the flag here 
    } 
}); 

ある実施例である： http://jsfiddle.net/nathando/s3KPn/4/（から抽出します同様の質問：それはないあなたのために働く場合Combining LazyLoad and Jquery Masonry）も

は、ここのギャラリーのためのjQueryのLazyLoadライブラリの束は、あなたがチェックすることができます：http://www.jqueryrain.com/demo/jquery-lazy-load/

あなたに役立つことを願っています！