如何在jQuery Masonry中添加無限滾動條？

我正在嘗試將無限滾動與我當前使用jQuery Masonry類型的網站相結合。我試圖理解JavaScript（和一般的HTML）的語言和基本功能，但它可能是相當的壓倒性的。我也看到不同的方法爲網頁添加無限滾動，包括使用PHP。基本上，我不知道哪個方法是我網站的最佳方法。任何提示或幫助非常感謝。對於我對這個主題缺乏瞭解，我表示歉意，但我只是覺得這已經超出了我的想象...... @ _ @如何在jQuery Masonry中添加無限滾動條？

這是我的網站。這是我個人的藝術品收藏： http://themptyrm.com

來源

2013-03-26 user2210202

無限滾動，我已經在我的項目試過一次所以這裏有一些到目前爲止我已經使用了引用..

https://github.com/paulirish/infinite-scroll

http://www.jquery4u.com/tutorials/jquery-infinite-scrolling-demos/

jScroll是Philip Klauzinski編寫的用於無限滾動的jQuery插件。無限滾動;也被稱爲延遲加載，無盡的滾動，autopager，無盡的頁面等;是在向下滾動時在當前頁面或內容區域內通過AJAX加載內容的能力。每次滾動到現有內容的結尾時，都可以自動加載新內容，也可以通過單擊現有內容末尾的導航鏈接觸發加載。

http://jscroll.com/

希望它能幫助。

來源

2013-03-26 05:38:06

你也可以使用這個... http://www.infinite-scroll.com/inf inite-scroll-jquery-plugin/ – 2013-03-26 05:38:20

在HTML文件中

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script src="../jquery.masonry.min.js"></script> 
<script src="../js/jquery.infinitescroll.min.js"></script>

添加此並添加此，在這裏你可以指定無限滾動的選項

<script type="text/javascript"> 
var $container = $('#container'); 
$container.infinitescroll({ 
    navSelector : '#page-nav', // selector for the paged navigation 
    nextSelector : '#page-nav a', // 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' 
    } 
    }, 
    // trigger Masonry as a callback 
    function(newElements) { 
    var $newElems = $(newElements); 
    $container.masonry('appended', $newElems); 
    } 
); 
</script>

順便說一下你的頁面看起來不錯

如果你有更多懷疑走到這裏Masonry with Infinite scroll

來源

2013-03-28 19:09:18 ChristianD

我一直在尋找這樣的解決方案的年齡。這段代碼在改變選擇器後立即起作用。 – egr103 2015-06-30 14:35:26

如何在jQuery Masonry中添加無限滾動條？

回答

相關問題