Here are 5 demos which you could use as the barebones for your next infinite scrolling project. I’ve been playing around with infinite scrolling for one of my projects and I’ve tried a few jQuery plugins which can manage the “endless scroll” showing items, posts, rss feeds, tweets or anything really. The content can be generated dynamically from JavaScript but most commonly loaded from a server script using AJAX. Also I found that Firefox 8 only detects the scroll upto 99.85% of the screen which was strange.
Infinite Scrolling Demo 1
This demo uses the jQuery Masonry plugin together with the Infinite Scroll plugin. The Masonry plugin really is good for obtaining fluid layouts definately recommend it for that. The infinite scroll plugin by Paul Irish is good at loading pages which already exist such as page.html, page2.html, page3.html but it can’t handle dynamic generated content such as hitting the same page.php file with appended parameters page.php?data=xxx. Just bear that in mind if you go with this option.
Usage – HTML
<div id="container">
<div class="box">
<p>content</p>
</div>
...
</div><!-- contains the content to be loaded when scrolled -->
<nav id="page-nav">
<a href="pages/2.html"></a>
</nav>Usage – jQuery
<script src="js/jquery.masonry.min.js"></script>
<script src="js/jquery.infinitescroll.min.js"></script>
<script>
$(function(){ var $container = $('#container');$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.box',
columnWidth: 100
});
});
$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: 'https://i.imgur.com/6RMhx.gif'
}
},
// trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
});
</script>Infinite Scrolling Demo 2
Basic infinite scrolling script which can load data in using AJAX and displays a nice little loading image at the bottom (twitter style). The demo never reaches the end of content but if you included either a) logic in your backend script to return nothing when content finishes or; b) a loop for loading to reach the end, then you could achieve this quite easily.
Usage – HTML
<div id="postswrapper">
<div class="item">content</div>
...
<div id="loadmoreajaxloader" style="display:none;">
<center><img src="ajax-loader.gif" /></center></div>
</div>Usage – jQuery
<script type="text/javascript">
$(window).scroll(function()
{
if($(window).scrollTop() == $(document).height() - $(window).height())
{
$('div#loadmoreajaxloader').show();
$.ajax({
url: "loadmore.php",
success: function(html)
{
if(html)
{
$("#postswrapper").append(html);
$('div#loadmoreajaxloader').hide();
}else
{
$('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
}
}
});
}
});
</script>Infinite Scrolling Demo 3
This demo loads in images on infinite scroll and never reaches the end. It uses the jquery.endless-scroll plugin which can be customised to trigger load for 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. Obviously the script can be customised to load more images from different sources quite easily.
Usage – HTML
<ul id="images">
<li><img src="img/grass-blades.jpg" width="580" height="360" alt="Grass Blades" /></li>
<li><img src="img/stones.jpg" width="580" height="360" alt="Stones" /></li>
<li><img src="img/sea-mist.jpg" width="580" height="360" alt="Sea Mist" /></li>
<li><img src="img/pier.jpg" width="580" height="360" alt="Pier" /></li>
<li><img src="img/lotus.jpg" width="580" height="360" alt="Lotus" /></li>
<li><img src="img/mojave.jpg" width="580" height="360" alt="Mojave" /></li>
<li><img src="img/lightning.jpg" width="580" height="360" alt="Lightning" /></li>
</ul>Usage – jQuery
<script type="text/javascript" src="js/jquery.endless-scroll.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$(document).endlessScroll({
bottomPixels: 500,
fireDelay: 10,
callback: function(i) {
var last_img = $("ul#images li:last");
last_img.after(last_img.prev().prev().prev(span class="br0">).prev().prev().prev().clone());
}
});
});
</script>Infinite Scrolling Demo 4
This demo uses the same plugin as demo 3 but we have applied the infinite scroll to a list with it’s own vertical scrollbar. As you scroll down the numbers are simply appended as list items.
Usage – HTML
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
...
</ul>Usage – jQuery
<script type="text/javascript" src="js/jquery.endless-scroll.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$('ul#list').endlessScroll({
fireOnce: false,
insertAfter: "ul#list div:last",
data: function(i) {
return '<li>' + i + '</li>'
}
});
});
</script>Infinite Scrolling Demo 5
This demo uses some JavaScript to detect the scrolling and trigger a function which shows the loading image and loads in more content using AJAX.
Usage – HTML
<ul class="items">
<li>content</li>
<li>content</li>
...
</ul>
<div id="lastPostsLoader"></div>Usage – jQuery
<script type="text/javascript">
$(document).ready(function(){
function lastAddedLiveFunc()
{
$('div#lastPostsLoader').html('<img src="bigLoader.gif">'); $.get("loadmore.php", function(data){
if (data != "") {
//console.log('add data..');
$(".items").append(data);
}
$('div#lastPostsLoader').empty();
});
};//lastAddedLiveFunc();
$(window).scroll(function(){
var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
var scrolltrigger = 0.95;
if ((wintop/(docheight-winheight)) > scrolltrigger) {
//console.log('scroll bottom');
lastAddedLiveFunc#40;);
}
});
});
</script>