Bind Infinite Scroll + Masonry plugins

Question

Я хотел был бы использовать плагины infinite scroll и Masonry для отображения моих фотографий. Однако я полностью застрял с частью HTML.

Я использую ниже код, чтобы связать два плагина, но я не знаю, как отобразить мой HTML класс .navigation и .nav-Предыдущий в йот, чтобы заставить его работать.

$(window).load(function(){ 

// Main content container 
var $container = $('.grid'); 

// Masonry + ImagesLoaded 
$container.imagesLoaded(function(){ 
$container.masonry({ 
    // selector for entry content 
    itemSelector: '.grid-item', 
    columnWidth: 300, 
    "gutter": 10 
}); 
}); 

// Infinite Scroll 
$container.infinitescroll({ 

// selector for the paged navigation (it will be hidden) 
navSelector : ".navigation", 
// selector for the NEXT link (to page 2) 
nextSelector : ".nav-previous a", 
// selector for all items you'll retrieve 
itemSelector : ".grid-item", 

// finished message 
loading: { 
    finishedMsg: 'No more pages to load.' 
    } 
}, 

// Trigger Masonry as a callback 
function(newElements) { 
    // hide new items while they are loading 
    var $newElems = $(newElements).css({ opacity: 0 }); 
    // ensure that images load before adding to masonry layout 
    $newElems.imagesLoaded(function(){ 
    // show elems now they're ready 
    $newElems.animate({ opacity: 1 }); 
    $container.masonry('appended', $newElems, true); 
    }); 

}); 

А вот мой HTML:

<div class="grid"> 

    <div class="grid-item"><img src="#"></div> 
    <div class="grid-item"><img src="#"></div> 
    <div class="grid-item"><img src="#"></div> 
    <div class="grid-item"><img src="#"></div> 
    <div class="grid-item"><img src="#"></div> 

</div> 

Answer 1

Ваша ссылка может выглядеть так:

<a id="next" href="index2.html">next page?</a> 

И бесконечномерным прокрутки JS, как это:

$container.infinitescroll({ 
    navSelector  : "#next", 
    nextSelector : "a#next", 
    // selector for all items you'll retrieve 

itemSelector : ".grid-item", 

// finished message 
loading: { 
finishedMsg: 'No more pages to load.' 
} 
}, 

// Trigger Masonry as a callback 
function(newElements) { 
// hide new items while they are loading 
var $newElems = $(newElements).css({ opacity: 0 }); 
// ensure that images load before adding to masonry layout 
$newElems.imagesLoaded(function(){ 
// show elems now they're ready 
$newElems.animate({ opacity: 1 }); 
$container.masonry('appended', $newElems, true); 
    }); 

    });