JQuery кладка бесконечной прокрутки там установить

Question

Я знаю несколько вопросов о том, проверил их все, но просто не могу заставить его работать, так как я не понимаю, как начать ...

У меня есть основная установка кладки:

http://jsfiddle.net/Lj0q8fe6/

Теперь, как я могу установить, сколько элементов показаны на первом и как можно вызвать, чтобы начать загрузку следующих элементов с бесконечной scoll? Пожалуйста, помогите

Я нашел много, как это:

jQuery(window).load(function(){ 

jQuery('.hfeed').masonry({ 
    singleMode: true, 
    itemSelector: '.box' 
}); 

jQuery('.hfeed').infinitescroll({ 
    navSelector : '.pagination', // selector for the paged navigation 
    nextSelector : '.pagination .next', // selector for the NEXT link (to page 2) 
    itemSelector : '.box',  // selector for all items you'll retrieve 
    loadingImg : '/wp-content/themes/sprppl/images/loader.gif', 
    loadingText : "Loading...", 
    donetext : 'No more pages to load.', 
    debug: false, 
    errorCallback: function() { jQuery('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal'); } 
    }, 
    // call masonry as a callback 
    function(newElements) { jQuery(this).masonry({ appendedContent: jQuery(newElements) }); } 
);  

}); 

Но когда я ввожу его, ничего не происходит .. Как начать здесь?

Answer 1

Вот

jsFiddle

с яваскрипта внешних ресурсов исправленных и фиксированный код, а также некоторые infinitescroll код. Вам нужно будет сделать страницу index2.html с вашими предметами, чтобы загрузить их, чтобы проверить это, так как нет возможности для того, чтобы поместить его в скрипку. Самый простой способ проверить - дублировать страницу и называть ее index2.html.

$(document).ready(function() { 
var $container = $('#content'); 
$container.imagesLoaded(function() { 
// Initialize Masonry 
$container.masonry({ 
    columnWidth: 320, 
    itemSelector: '.item', 
    isFitWidth: true, 
    isAnimated: !Modernizr.csstransitions 
}); 

}); 
$container.infinitescroll({ 
    navSelector : 'a#next', // selector for the paged navigation 
    nextSelector : 'a#next', // 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', 
     msgText: "<em>Loading the next set of posts...</em>" 
    }, 
errorCallback: function() { $('#infscr-loading').animate({opacity: 0.8},2000).fadeOut('normal');  } 
}, 
// call masonry as a callback 
    function(newElements) { 
var $newElems = $(newElements); 
$container.masonry('appended', $newElems); 
} 
);  
});