Come aggiungo lo scroll infinito con jQuery Masonry?

Question

Sto cercando di incorporare lo scroll infinito con il mio sito web corrente che utilizza un tipo di jQuery Masonry. Sto cercando di capire la lingua e la funzione di base di javascript (e html in generale), ma può essere abbastanza travolgente. Sto anche vedendo diversi metodi per aggiungere lo scroll infinito a una pagina web, incluso l'uso di php. Fondamentalmente, non ho il senso dell'orientamento su quale sia il metodo migliore per il mio sito web. Qualsiasi consiglio o aiuto è molto apprezzato. E mi scuso per la mia mancanza di conoscenza riguardo a questo argomento, ma sento che questo è abbastanza sopra la mia testa ... @ _ @

Ecco il mio sito web. Si tratta di mie collezioni di opere d'arte personali: http://themptyrm.com

Answer 1

Infinite Scroll, ho provato una volta nel mio progetto per cui qui sono alcuni dei riferimenti che avevo usato finora ..

https://github.com/paulirish/infinite-scroll

http://www.jquery4u.com/tutorials/jquery-infinite-scrolling-demos/

jScroll è un plugin jQuery per scrolling infinito, scritto da Philip Klauzinski. Scorrimento infinito; noto anche come caricamento pigro, scorrimento infinito, autopager, pagine infinite, ecc .; è la capacità di caricare i contenuti tramite AJAX all'interno della pagina o dell'area di contenuto corrente mentre scorri verso il basso. Il nuovo contenuto può essere caricato automaticamente ogni volta che si scorre fino alla fine del contenuto esistente oppure può essere attivato per caricare facendo clic su un collegamento di navigazione alla fine del contenuto esistente.

http://jscroll.com/

Speranza che aiuta.

Answer 2

aggiungere questo nel file HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script src="../jquery.masonry.min.js"></script> 
<script src="../js/jquery.infinitescroll.min.js"></script> 

e aggiungere questo, qui è possibile specificare le opzioni di scorrimento infinito

<script type="text/javascript"> 
var $container = $('#container'); 
$container.infinitescroll({ 
    navSelector : '#page-nav', // selector for the paged navigation 
    nextSelector : '#page-nav a', // selector for the NEXT link (to page 2) 
    itemSelector : '.box',  // selector for all items you'll retrieve 
    loading: { 
     finishedMsg: 'No more pages to load.', 
     img: 'http://i.imgur.com/6RMhx.gif' 
    } 
    }, 
    // trigger Masonry as a callback 
    function(newElements) { 
    var $newElems = $(newElements); 
    $container.masonry('appended', $newElems); 
    } 
); 
</script> 

dal modo in cui la pagina sembra grande

se si dispone di più i dubbi vanno qui Masonry with Infinite scroll