Social websites often have the feature of continuous scrolling, which is also known as infinite scrolling. There are long lists of items and as you scroll the page down, new items are loaded and attached to the bottom automatically. In this recipe, we will see how to achieve such an effect with Django and the jScroll jQuery plugin. We'll illustrate this using a sample view showing the top 250 movies of all time from Internet Movie Database (http://www.imdb.com/).
First, download the jScroll plugin from the following link: https://github.com/pklauzinski/jscroll.
Put the jquery.jscroll.js
and jquery.jscroll.min.js
files from the package in the myproject/site_static/site/js/
directory.
Next, for this example, you will create a movies
app with a paginated list view for the movies. You can either create a Movie
model or a list of dictionaries with the movie data. Every movie will have rank, title, release year, and rating fields.