0

저는 벽돌집, 페이지 매기기 및 무한 스크롤의 조합을 사용하고 있습니다. Masonry와 Will Paginate는 잘 작동하지만 Infinite Scroll을 작동시키지 못합니다.페이지가없는 페이지와 벽돌로 무한 스크롤이 작동하지 않습니다.

나는 셀렉터가 틀렸을 수도 있지만 다른 변형을 시도한 후에도 여전히 어둠 속에 있다고 생각합니다.

스크립트

<script type="text/javascript"> 
$(function(){ 

    var $container = $('#container'); 
    $container.imagesLoaded(function(){ 
     $container.masonry({ 
     itemSelector : 'item' 
     }); 

    }); 

    }); 

// infinitescroll() is called on the element that surrounds 
// the items you will be loading more of 
    $('#container').infinitescroll({ 

    navSelector : '.pagination',    
        // selector for the paged navigation (it will be hidden) 
    nextSelector : '.pagination .next_page a',  
        // selector for the NEXT link (to page 2) 
    itemSelector : '#container .item'   
        // selector for all items you'll retrieve 
    }, 
    // trigger Masonry as a callback 
    function (newElements) { 
     var $newElems = $(newElements); 
     $container.masonry('appended', $newElems); 
    } 
); 

</script> 

탐색

<div class="pagination"> 
<span class="previous_page disabled">← Previous</span> 
    <em>1</em> 
    <a href="/?page=2" rel="next">2</a> 
    <a href="/?page=3">3</a> 
    <a href="/?page=4">4</a> 
    <a href="/?page=5">5</a> 
    <a href="/?page=6">6</a> 
    <a href="/?page=7">7</a> 
    <a class="next_page" href="/?page=2" rel="next">Next →</a> 
</div> 

내용

<div id="container" class="masonry" style="position: relative; height: 0px;"> 
<script type="text/javascript" src="/javascripts/jquery.min.js?1329440016"> 
<script type="text/javascript" src="/javascripts/jquery.masonry.min.js?1327461530"> 
<script type="text/javascript" src="/javascripts/jquery.infinitescroll.min.js?1324335816"> 
<div class="item"> 

답변

0

안에 당신의 infinitescroll 이동하십시오. 즉, 다음을 시도하십시오.

$(function(){ 
... 

    $('#container').infinitescroll({ 
    ... 
); 
}); 

희망이 있습니다.

0

nextSelector은 이 아니고 .pagination .next_page a이 아니어야합니다.

관련 문제