如何在HTML上制作无限滚动图片页面？

Question

I want to create an HTML page that i can put few images inside, and scroll (up and down, right to left), without limits (the images will return themselves).

Here is great example for this: MacDonalds Favourites .

i've tried to do a js code that calcuate the height of the page and when he now that he came to the end of tha page - he scrolling to the top of him.

$(window).scroll(function() { 
    if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
        window.scrollTo(0,0); 
    } 
});

Answer 1

The infinite scroll method does invoke jQuery, similar to what you have written here. But you would also want to bring in additional data to be displayed, which you can do in a variety of different ways.

Since you are already using jQuery, it would sense to use the .ajax() method from that library.

$.ajax({
  url: "http://your-url-here.com/extra-content.html",
}).done(function(html)  {
  $("#results").append(html); 
});

See the jQuery docs for more information on the .ajax method: https://api.jquery.com/jQuery.ajax/

Answer 2

尝试将iscroll与无限滚动一起使用，我建议您也对图像使用对齐元素，以使其具有轮播外观http://iscrolljs.com/#infinite-scrolling