[英]Infinite scroll not working with Will Paginate and Masonry
我使用的是石工,將分頁和無限滾動。 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">
您的nextSelector
必須是.pagination a.next_page
,而不是.pagination .next_page a
。
嘗試將無限滾動移動到內部。 即,嘗試以下操作:
$(function(){
...
$('#container').infinitescroll({
...
);
});
希望能有所幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.