Infinite scrolling is now a common feature and there are several cases where it is really useful. For instance there are some websites where we simply can't imagine a good pagination system, like Twitter or even Facebook. Another example of where infinite scrolling can be useful is for a search engine: you'll want to continue viewing new links while you don't find the one you want, and a pagination system can slow you down in your research.
[author_more]
If you need to use infinite scrolling for your project, here are six demos that you can use as inspiration to implement it.
Note that, except for the last one, all these demos are written with jQuery and some examples are using jQuery plugins. However, other examples can easily be adapted for vanilla JS without any problem.
1. Infinite Scrolling and Grids
This demo uses the jQuery Masonry plugin together with the Infinite Scroll plugin. The Masonry plugin is good for obtaining fluid grid layouts. The Infinite Scroll plugin by Paul Irish is good at loading pages that already exist (so it is good for your SEO). You can use it to load static pages such as page2.html, page3.html, etc., but this plugin also handle generated pages, such as page.php?p=2, page.php?p=3. However, to use it you need to have a page number to increment in your URLs so, if you have pages such as page.php?data=xxx, then this plugin is not for you.
Usage - HTML
[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>
[/html]
Usage - jQuery
[js]
$(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);
});
});
[/js]
2. Infinite Scrolling through Blog Posts
This demo doesn't use any plugin or library to handle the infinite scrolling feature. Each time the end of the page is reached by the user, it loads a new post, generated by a PHP script that echoes the corresponding HTML code. The demo never reaches the end of content but you can achieve this by, for example, echoing an empty string when there is no more posts to show. We display a loading image at the end of the page, in the spirit of Twitter.
Note that, in the live demo below, the new posts are generated by a JavaScript function, as we can't use a PHP script in CodePen.
See the Pen Infinite Scrolling through Blog Posts by SitePoint (@SitePoint) on CodePen.
Usage - HTML
[html]
<ul id="posts">
<li>
<article>content</article>
</li>
…
</ul>
<p id="loading">
<img src="images/loading.gif" alt="Loading…" />
</p>
[/html]
Usage - jQuery
[js]
$(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();
}
});
}
});
});
[/js]
3. Infinite Scrolling through Images
This demo loads in images on infinite scroll and never reaches the end. It uses the jQuery Endless Scroll plugin which can be customized to trigger loading x number of pixels from the bottom of the screen. The demo clones the same images and inserts them at the end of the list and so on, but the script can be customized to load the images from different sources quite easily.
See the Pen Infinite Scrolling through Images by SitePoint (@SitePoint) on CodePen.
Usage - HTML
[html]
<ul id="images">
<li>
<a href="http://ift.tt/1fX21J1">
<img src="http://ift.tt/1MQEqJN" alt="" />
</a>
</li>
…
</ul>
[/html]
Usage - jQuery
[js]
$(document).ready(function() {
$(window).endlessScroll({
inflowPixels: 300,
callback: function() {
var last = $('#images li:last');
last.after(last.prev().prev().prev().prev().clone());
}
});
});
[/js]
Continue reading %6 jQuery Infinite Scrolling Demos%
by Jérémy Heleine via SitePoint
