Design Lunatic

Isotope infinite scroll

The faster something loads, the happier the user is. This is something it is important to understand when creating websites. Today, I’ll show how to use jQuery’s AJAX capabilities in conjunction with isotope.js to dynamically load content in once the user reaches the bottom of the page, which makes everything seem faster and improves the user experience.

Before you begin this tutorial, make sure you have a local web server set up, because jQuery’s AJAX functions don’t work when the file is just opened locally.

HTML

The HTML remains the same as it was in the original isotope tutorial. However, you must create some more pages. Create a duplicate of the index.html file from the original isotope tutorial and call it page2.html. Do the same thing again, and call it page3.html. Put the pages you created in a directory called “pages”. Feel free to change the content of the boxes inside each page – that will just make it easier to distinguish which box came from what page.

CSS

The CSS remains unchanged from the original isotope tutorial.

jQuery

First, include the jquery that initializes isotope.

$(document).ready(function(){
	var $container = $('#content');
	$container.isotope({
		filter: '*',
		animationOptions: {
			duration: 750,
			easing: 'linear',
			queue: false,
		}
	});

	$('#nav a').click(function(){
		var selector = $(this).attr('data-filter');
		$container.isotope({ 
			filter: selector,
			animationOptions: {
				duration: 750,
				easing: 'linear',
				queue: false,
			}
		});
		
		return false;
	});
});

Now, can start on the AJAX functionality. First, we need a variable to store what page is currently being displayed on the page.

var page = 1;

This will go up by one every time another page is loaded in.

Next, we’ll create the window.scroll function that all of our code today will go into.

var page = 1;
$(window).scroll(function(){

});

This is where all the magic will happen. Since the whole purpose of the script is to detect when a user has scrolled down to the bottom of the page and load content in when that happens, we need a window.scroll function. Every time the user scrolls, the code inside this function is executed.

Now, we’ll create some variables.

var scrollTop = $(window).scrollTop();
var windowHeight = $(window).height();
var docuHeight = $(document).height();

We’ll use these three variables to determine whether or not the user has scrolled down to the bottom of the page yet.

if(scrollTop + windowHeight == docuHeight){

}

This statement is true if the user has scrolled to the bottom of the page.

Once the user has scrolled to the bottom of the page, a temporary div called “temp-load” will be created.

if(scrollTop + windowHeight == docuHeight){
	$('body').append('<div id="temp-load"</div>');
}

Next, we’ll use jQuery’s load function to get the boxes from the next page and put them into this temp-load div.

if(scrollTop + windowHeight == docuHeight){
	$('body').append('<div id="temp-load"</div>');

	page += 1;

	$('#temp-load').load('pages/page' + page + '.html #content');
}

The parameter inside the load function is what jquery is retrieving. In this case, it is a page inside the “pages” directory, and the page is whatever the next page is – that’s why page is being incremented by one. The second part of the parameter is “#content”, which means jquery is only retrieving the #content div from the next page, since we don’t need anything else. The HTML jquery retrieves is placed inside the “#temp-load” div.

Jquery .load can take another parameter, which is the callback.

$('#temp-load').load('pages/page' + page + '.html #content', function(){
	
});

The code inside the callback gets executed once the load function successfully completes, which means everything was retrieved and has been placed into the “#temp-load” div.

$('#temp-load').load('pages/page' + page + '.html #content', function(){
	$('#temp-load > #content').children().css({ 
		 opacity: 0 
	});	

	var toAdd = $('#temp-load > #content').html();
	
});

This code makes the elements inside the “temp-load” div have an opacity of 0, so that they can later on be nicely animated in. The “toAdd” variable contains the HTML for all the elements that were just loaded in with jquery. We’ll insert the content of this variable into the main container. To do this, we’ll use isotope’s insert function.

var toAdd = $('#temp-load > #content').html();

$container.isotope('insert', $(toAdd), function(){
	$container.children().css({
		opacity: 1
	});	
					
	$('#temp-load').remove();
					
});
				

Here’s what happens: isotope takes the value of “toAdd” and appends it to the inside of the $container. It then triggers a reLayout, which means everything inside is re-filtered. This way, all the items are now isotoped. Once the items have been added, the callback function fires. Inside that, we make all of $container’s children have an opacity of 1. Since the elements we just added all have an opacity of 0, they need to become visible. Modifying their styles to make their opacity 1 animates them to become visible. Lastly, the temporary div is removed since we no longer need it.

The final code looks like this:

$(document).ready(function(){
	var $container = $('#content');
	$container.isotope({
		filter: '*',
		animationOptions: {
			duration: 750,
			easing: 'linear',
			queue: false,
		}
	});

	$('#nav a').click(function(){
		var selector = $(this).attr('data-filter');
		$container.isotope({ 
			filter: selector,
			animationOptions: {
				duration: 750,
				easing: 'linear',
				queue: false,
			}
		});
		
		return false;
	});

	var page = 1;

	$(window).scroll(function(){

		var scrollTop = $(window).scrollTop();
		var windowHeight = $(window).height();
		var docuHeight = $(document).height();

		if(scrollTop + windowHeight == docuHeight){
				
			$('body').append('<div id="temp-load"</div>');

			page += 1;
			
			$('#temp-load').load('pages/page' + page + '.html #content', function(){
				
				$('#temp-load > #content').children().css({
					opacity: 0
				});	
			
				var toAdd = $('#temp-load > #content').html();

				$container.isotope('insert', $(toAdd), function(){
					
					$container.children().css({
					opacity: 1
					});	
					
					$('#temp-load').remove();
					
				});
		
			});
			
		}

	});

});

That’s the end of this tutorial; I hope you enjoyed it. If you have any questions or comments, feel free to leave them in the comments section below.