我正在尝试将无限滚动与我当前使用一种jQuery Masonry的网站合并。我试图理解javascript(和一般的html)的语言和基本功能,但它可能是非常压倒性的。我也看到了向网页添加无限滚动的不同方法,包括使用php。基本上,对于我的网站最好的方法,我没有方向感。任何提示或帮助非常感谢。我为这个话题缺乏知识而道歉,但我觉得这完全超出了我的想法...... @ _ @
这是我的网站。这是我个人的艺术品收藏: http://themptyrm.com
答案 0 :(得分:22)
在你的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
答案 1 :(得分:5)
Infinite Scroll,我在我的项目中尝试了一次,所以这里有一些我到目前为止使用过的参考文献。
https://github.com/paulirish/infinite-scroll
http://www.jquery4u.com/tutorials/jquery-infinite-scrolling-demos/
jScroll是一个用于无限滚动的jQuery插件,由Philip Klauzinski编写。无限滚动;也称为延迟加载,无限滚动,自动加载,无尽页面等;是您向下滚动时在当前页面或内容区域内通过AJAX加载内容的功能。每次滚动到现有内容的末尾时,都可以自动加载新内容,也可以通过单击现有内容末尾的导航链接来触发加载新内容。
希望它有所帮助。