网站图片速度百度图片识别搜索
无限滚动现在是一个常见功能，在某些情况下它确实很有用。 例如，有些网站我们根本无法想象一个好的分页系统，例如Twitter甚至Facebook。 无限滚动可能有用的另一个示例是对于搜索引擎：您想要继续查看新链接，而找不到所需的链接，而分页系统可能会使您的研究慢下来。
如果您需要为项目使用无限滚动，则可以使用以下六个演示作为实现示例的灵感。
请注意，除了最后一个之外，所有这些演示都是使用jQuery编写的，并且一些示例使用jQuery插件。 但是，其他示例也可以轻松地适用于Vanilla JS，而不会出现任何问题。
1.无限滚动和网格
该演示使用jQuery Masonry插件和Infinite Scroll插件 。 Masonry插件非常适合获取流体网格布局。 Paul Irish的Infinite Scroll插件擅长加载已经存在的页面（因此对您的SEO很有帮助）。 您可以使用它加载诸如page2.html ， page3.html等的静态页面，但是此插件还可以处理生成的页面，例如page.php?p=2 ， page.php?p=3 。 但是，要使用它，您需要一个页码来增加您的URL，因此，如果您拥有诸如page.php?data=xxx ，那么此插件不适合您。
用法– HTML
<div class="grid"><div class="grid-item grid-item-2"><p>content</p></div>…
</div><!-- The next page which content will be loaded when scrolled -->
<nav id="pagination"><p><a href="page-2.html">Page 2</a></p>
</nav>用法– jQuery
$(document).ready(function() {var grid = $('.grid');grid.masonry({itemSelector: '.grid-item',columnWidth: 200});grid.infinitescroll({// Pagination element that will be hiddennavSelector: '#pagination',// Next page linknextSelector: '#pagination p a',// Selector of items to retrieveitemSelector: '.grid-item',// Loading messageloadingText: 'Loading new items…'},// Function called once the elements are retrievedfunction(new_elts) {var elts = $(new_elts).css('opacity', 0);elts.animate({opacity: 1});grid.masonry('appended', elts);});
});2.无限滚动博客文章
该演示不使用任何插件或库来处理无限滚动功能。 每次用户到达页面末尾时，它都会加载一个新帖子，该帖子是由PHP脚本生成的，该脚本回显相应的HTML代码。 该演示永远不会到达内容的结尾，但是您可以通过例如在没有更多帖子可以显示时回显一个空字符串来实现此目的。 本着Twitter的精神，我们在页面末尾显示一个加载图像。
请注意，在下面的实时演示中，新帖子是由JavaScript函数生成的，因为我们无法在CodePen中使用PHP脚本。
请参阅CodePen上的SitePoint （ @SitePoint ） 通过博客帖子进行笔无限滚动 。
用法– HTML
<ul id="posts"><li><article>content</article></li>…
</ul><p id="loading"><img src="images/loading.gif" alt="Loading…" />
</p>用法– jQuery
$(document).ready(function() {var win = $(window);// Each time the user scrollswin.scroll(function() {// End of the document reached?if ($(document).height() - win.height() == win.scrollTop()) {$('#loading').show();$.ajax({url: 'get-post.php',dataType: 'html',success: function(html) {$('#posts').append(html);$('#loading').hide();}});}});
});3.无限滚动图像
此演示无限滚动地加载图像，并且永远不会结束。 它使用jQuery Endless Scroll插件 ，可以对其进行自定义以触发从屏幕底部加载x个像素。 该演示程序会克隆相同的图像，并将其插入列表的末尾，依此类推，但是可以自定义脚本以轻松地从不同来源加载图像。
请参阅CodePen上的SitePoint （ @SitePoint ）的笔无限滚动浏览图像 。
用法– HTML
<ul id="images"><li><a href="https://www.pexels.com/photo/mist-misty-fog-foggy-7919/"><img src="https://pexels.imgix.net/photos/7919/pexels-photo.jpg?fit=crop&w=640&h=480" alt="" /></a></li>…
</ul>用法– jQuery
$(document).ready(function() {$(window).endlessScroll({inflowPixels: 300,callback: function() {var $img = $('#images li:nth-last-child(5)').clone();$('#images').append($img);}});
});4.无限数量的清单
该演示使用的插件与上一个插件相同，但我们已将无限滚动应用于具有其自己的垂直滚动条的列表。 向下滚动时，数字会简单地附加为列表项。
参见Pen 在 CodePen上的SitePoint （ @SitePoint ）所提供的无限数字列表 。
用法– HTML
<ul id="numbers"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>…
</ul>用法– jQuery
$(document).ready(function() {var offset = $('#numbers li').length;$('#numbers').endlessScroll({fireOnce: false,fireDelay: false,loader: '',insertAfter: '#numbers li:last',content: function(i) {return '<li>' + (i + offset) + '</li>';}});
});5.无限的电子表格
该演示使用与演示2相同的技术来检测用户何时到达文档末尾，不仅垂直而且水平。 每次达到终点时，我们都会在表中添加新行或新列。 如果要创建电子表格应用程序，这正是我们可以编写的脚本。
请注意所有单元格为空。 行和列索引是使用CSS计数器生成的，因此我们不需要自己计算它们。
请参阅CodePen上的SitePoint （ @SitePoint ）提供的Pen Infinite Spreadsheets 。
用法– HTML
<table id="spreadsheet"><tr><td></td><th></th>…</tr><tr><th></th><td></td>…</tr>…
</table>用法– jQuery
$(document).ready(function() {var win = $(window);var doc = $(document);// Each time the user scrollswin.scroll(function() {// Vertical end reached?if (doc.height() - win.height() == win.scrollTop()) {// New rowvar tr = $('<tr />').append($('<th />')).appendTo($('#spreadsheet'));// Current number of columns to createvar n_cols = $('#spreadsheet tr:first-child th').length;for (var i = 0; i < n_cols; ++i)tr.append($('<td />'));}// Horizontal end reached?if (doc.width() - win.width() == win.scrollLeft()) {// New column in the heading row$('#spreadsheet tr:first-child').append($('<th />'));// New column in each row$('#spreadsheet tr:not(:first-child)').each(function() {$(this).append($('<td />'));});}});
});6.无限滚动+分页
不利于无限滚动：如果实施不当，可能会破坏用户体验。 如果让用户加载无限列表，则一段时间后他们可能会失去位置。 这是传统分页系统永远都无法做到的。 但是，分页需要用户进行无限滚动时不需要的操作。
这两个事实使Tim Severien有了一个主意：如果我们将无限滚动和分页结合起来，以利用两种方法的优势怎么办？ 结果是最后一个演示。
向用户显示初始页面。 当用户向下滚动并到达页面底部时，将自动加载新页面。 在这里，我们享受无限滚动带来的简单性。 但是新内容来自屏幕底部固定的列表。
最初是隐藏的，每次加载新页面时，此列表都会被填充，并带有此页面的编号。 这样，如果用户想要检索第二页，则可以通过点击相应的编号而毫不费力。
请参阅CodePen上的SitePoint笔的无限滚动+分页 （ @SitePoint ）。
用法– HTML
<div class="article-list" id="article-list"></div>
<ul class="article-list__pagination article-list__pagination--inactive" id="article-list-pagination"></ul>用法– JavaScript
请注意，此代码使用ES6，但是您可以轻松地将其转换为ES5。
function getPageId(n) {return 'article-page-' + n;
}function getDocumentHeight() {const body = document.body;const html = document.documentElement;return Math.max(body.scrollHeight, body.offsetHeight,html.clientHeight, html.scrollHeight, html.offsetHeight);
};function getScrollTop() {return (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
}function getArticleImage() {const hash = Math.floor(Math.random() * Number.MAX_SAFE_INTEGER);const image = new Image;image.className = 'article-list__item__image article-list__item__image--loading';image.src = 'http://api.adorable.io/avatars/250/' + hash;image.onload = function() {image.classList.remove('article-list__item__image--loading');};return image;
}function getArticle() {const articleImage = getArticleImage();const article = document.createElement('article');article.className = 'article-list__item';article.appendChild(articleImage);return article;
}function getArticlePage(page, articlesPerPage = 16) {const pageElement = document.createElement('div');pageElement.id = getPageId(page);pageElement.className = 'article-list__page';while (articlesPerPage--) {pageElement.appendChild(getArticle());}return pageElement;
}function addPaginationPage(page) {const pageLink = document.createElement('a');pageLink.href = '#' + getPageId(page);pageLink.innerHTML = page;const listItem = document.createElement('li');listItem.className = 'article-list__pagination__item';listItem.appendChild(pageLink);articleListPagination.appendChild(listItem);if (page === 2) {articleListPagination.classList.remove('article-list__pagination--inactive');}
}function fetchPage(page) {articleList.appendChild(getArticlePage(page));
}function addPage(page) {fetchPage(page);addPaginationPage(page);
}const articleList = document.getElementById('article-list');
const articleListPagination = document.getElementById('article-list-pagination');
let page = 0;addPage(++page);window.onscroll = function() {if (getScrollTop() < getDocumentHeight() - window.innerHeight) return;addPage(++page);
};结论
我们看了实现无限滚动的六个不同示例。 无论您要构建什么，都应该能够使用这些技术之一来获得所需的结果。 与往常一样，我们很想听听您的想法：您是否使用这些插件或技术之一构建了很棒的东西？ 您是否有最喜欢的插件，您认为应该提到？ 让我们在评论中知道！
From: https://www.sitepoint.com/jquery-infinite-scrolling-demos/