13

I am trying to incorporate infinite scroll with my current web site that is using a type of jQuery Masonry. I am trying to understand the language and the basic function of javascript (and html in general), but it can be quite overwhelming. I am also seeing different methods to add infinite scroll to a web page, including the use of php. Basically, I have no sense of direction as to which is the best method for my web site. Any tips or help is greatly appreciated. And I apologize for my lack of knowledge regarding this topic, but I just feel this is quite over my head... @_@

Here is my web site. It is my personal artwork collections: http://themptyrm.com

4

2 回答 2

23

将此添加到您的 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-28T19:09:18.347 回答
5

Infinite Scroll，我在我的项目中尝试过一次，所以这里是我迄今为止使用的一些参考资料。

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

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

jScroll 是一个用于无限滚动的 jQuery 插件，由 Philip Klauzinski 编写。无限滚动; 也称为延迟加载、无限滚动、自动分页器、无限页等；当您向下滚动时，能够在当前页面或内容区域内通过 AJAX 加载内容。每次滚动到现有内容的末尾时，可以自动加载新内容，也可以通过单击现有内容末尾的导航链接触发加载。

http://jscroll.com/

希望能帮助到你。

于 2013-03-26T05:38:06.227 回答