저는 벽돌집, 페이지 매기기 및 무한 스크롤의 조합을 사용하고 있습니다. 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">