无限滚动插件 jquery_6个jQuery无限滚动演示

最新推荐文章于 2022-10-07 11:20:18 发布

dingshi7798

最新推荐文章于 2022-10-07 11:20:18 发布

阅读量361

点赞数

文章标签：列表 javascript java js python ViewUI

原文链接：https://www.sitepoint.com/jquery-infinite-scrolling-demos/

版权

无限滚动插件 jquery

无限滚动现在是一个常见功能，在某些情况下它确实很有用。例如，有些网站我们根本无法想象一个好的分页系统，例如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 hidden
		navSelector: '#pagination',

		// Next page link
		nextSelector: '#pagination p a',

		// Selector of items to retrieve
		itemSelector: '.grid-item',

		// Loading message
		loadingText: 'Loading new items…'
	},

	// Function called once the elements are retrieved
	function(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 scrolls
	win.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上的PenPoint通过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.无限数字列表

该演示使用的插件与上一个插件相同，但是我们已将无限滚动应用于具有其自己的垂直滚动条的列表。向下滚动时，数字会简单地附加为列表项。

见笔数的无限名单由SitePoint（ @SitePoint上） CodePen 。

用法– 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 scrolls
	win.scroll(function() {
		// Vertical end reached?
		if (doc.height() - win.height() == win.scrollTop()) {
			// New row
			var tr = $('<tr />').append($('<th />')).appendTo($('#spreadsheet'));

			// Current number of columns to create
			var 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.无限滚动+分页

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

不利于无限滚动：如果实施不当，可能会破坏用户体验。如果让用户加载无限列表，则一段时间后他们可能会失去位置。这是传统分页系统永远都无法做到的。但是，分页需要用户进行无限滚动时不需要的操作。

这两个事实使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);
};

结论

我们看了实现无限滚动的六个不同示例。无论您要构建什么，都应该能够使用这些技术之一来获得所需的结果。与往常一样，我们很想听听您的想法：您是否使用这些插件或技术之一构建了很棒的东西？您是否有喜欢的插件，您认为应该提到？让我们在评论中知道！

翻译自: https://www.sitepoint.com/jquery-infinite-scrolling-demos/

无限滚动插件 jquery

dingshi7798

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
无限滚动插件 jquery_6个jQuery无限滚动演示

无限滚动插件 jquery 无限滚动现在是一个常见功能，在某些情况下它确实很有用。例如，有些网站我们根本无法想象一个好的分页系统，例如Twitter甚至Facebook。无限滚动可能有用的另一个示例是对于搜索引擎：您想要继续查看新链接，而找不到所需的链接，而分页系统可能会使您的研究慢下来。如果您需要为项目使用无限滚动，则可以使用以下六个演示作为实现示例的灵感。请注意，除了最后一个之...
复制链接

扫一扫