Jak dodać nieskończone przewijanie za pomocą jQuery Masonry?

Question

Próbuję włączyć nieskończony przewijania z mojej bieżącej witryny sieci web, który jest przy użyciu typu murarskie jQuery. Próbuję zrozumieć język i podstawową funkcję javascript (i ogólnie html), ale może to być dość przytłaczające. Widzę również różne metody dodawania nieskończonego przewijania do strony internetowej, w tym korzystania z php. Zasadniczo nie mam wyczucia kierunku, która metoda jest najlepsza dla mojej witryny. Wszelkie wskazówki i pomoc są mile widziane. I przepraszam za mój brak wiedzy na ten temat, ale po prostu czuję, że jest to całkowicie nad moją głową ... @ _ @

Oto moja strona internetowa. To jest moje osobiste grafika kolekcje: http://themptyrm.com

Answer 1

Nieskończony Scroll, próbowałem kiedyś w moim projekcie tak oto niektóre z odniesieniami używałem do tej pory ..

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

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

jScroll to wtyczka jQuery do nieskończonego przewijania napisana przez Philipa Klauzinskiego. Nieskończone przewijanie; znany również jako leniwy załadunek, nieskończone przewijanie, autopager, niekończące się strony itd .; to możliwość ładowania zawartości za pośrednictwem AJAX w bieżącej stronie lub obszarze zawartości podczas przewijania w dół. Nowa zawartość może być ładowana automatycznie za każdym razem, gdy przewiniesz do końca istniejącej zawartości, lub można ją uruchomić, klikając link nawigacyjny na końcu istniejącej zawartości.

http://jscroll.com/

Nadzieję, że to pomaga.

Answer 2

dodać to w pliku 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> 

i dodać to, tutaj można określić nieskończone możliwości przewijania

<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> 

przy okazji strona wygląda świetnie

jeśli masz więcej wątpliwości tutaj Masonry with Infinite scroll