Umsetzung Bildgalerie, die faul laden Bilder von unbekannter Größe auf blättern und sie Positionen optimal

Question

Ich brauche eine Fotogalerie mit der folgenden Spezifikation zu implementieren:

1. Bilder eine maximale Höhe und Breite haben müssen. Sie behalten ihr Seitenverhältnis innerhalb dieser Grenzen.

2. basierend auf der endgültigen Größe der Bilder nach den maximalen Größenbeschränkungen, ordnen Sie sie auf der Seite so an, dass leere Leerzeichen reduziert werden.

3. Während der Container nach unten scrollt, laden Sie weitere Bilder.

Bibliotheken, die ich wie masonry und diese lay load lib alle erwarten voraus bekannt sein Breite und Höhe der Zeit erforscht.

Es scheint, dass ich möglicherweise auf das Laden der Bilder in einem unsichtbaren Zustand zurückgreifen muss, um die Breiten- und Höhenparameter zu erhalten, bevor Sie sie auf der Seite positionieren. Dies wird mit dem "Mauerwerk" -Aspekt helfen, aber dem Lazy-Load-Mechanismus widersprechen.

Ich würde alle Hinweise in die richtige Richtung schätzen.

Answer 1

Ich benutze gerade Mauerwerk und ich denke, dass es zu Ihren Bedürfnissen passt. Ich habe unterschiedliche Breite & Höhe Bilder und ich lade mit einer festen Max-Breite (mit einer festen Breite oder relativ zu der Seite eins) und dann die Layouts neu angeordnet, um Leerstellen zu vermeiden und Seitenverhältnis der Bilder zu behalten. Wenn ich den unteren Rand der Seite erreiche, lade ich (manuell) mehr Gegenstände. Dies ist mein Code

//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 
    } 
}); 

Sie können das Ergebnis bei http://pintevent.com überprüfen (ist eine Beta-Seite)

Dann ist leicht LazyLoad allen Bildern hinzufügen, hier ist ein funktionierendes Beispiel: http://jsfiddle.net/nathando/s3KPn/4/ (extrahiert aus eine ähnliche Frage: Combining LazyLoad and Jquery Masonry)

auch, wenn es nicht für Sie funktioniert, ist hier ein Haufen von jquery LazyLoad Bibliotheken für Galerien können Sie überprüfen: http://www.jqueryrain.com/demo/jquery-lazy-load/

Hoffe es hilft dir!