When you open the movie list view in a browser, the predefined number of items set to paginate_by in the view (that is, 15) is shown on the page. As you scroll down, an additional page's worth of items and the next pagination link are loaded automatically and appended to the item container. The pagination link uses the {% modify_query %} custom template tag from the Creating a template tag to modify request query parameters recipe in Chapter 5, Customizing Template Filters and Tags to generate an adjusted URL based on the current one, but pointing to the correct next page number:

Scrolling down further, the third page of the items is loaded and attached at the bottom. This continues until there are no more pages left to load, which is signified by not having loaded any next pagination link in the final group.

Upon the initial page load, the element with the object-list  CSS class, which contains the items and pagination links, will become a jScroll object through the code in the list.js. In fact, this implementation is generic enough that it could be used to enable continuous scrolling for any list display following a similar markup structure.

The following options are given to define its features:

• loadingHtml: This sets the markup that jScroll will inject at the end of the list while loading a new page of items. In our case, it is an animated loading indicator, and it is drawn from the HTML contained in a <script type="text/template"> tag directly in the markup. By giving this type attribute, the browser will not try to execute it as it would a normal JavaScript, and the content inside remains invisible to the user.
• padding: When the scroll position of the page is within this distance of the end of the scrolling area, a new page should be loaded. Here, we've set it at 100 pixels.
• pagingSelector: A CSS selector that indicates what HTML elements in the object_list are pagination links. These will be hidden in browsers where the jScroll plugin activates so that the continuous scroll can take over loading additional pages, but users in other browsers will still be able to navigate by clicking on the pagination normally.
• nextSelector: This CSS selector finds the HTML element(s) from which to read the URL of the next page.
• contentSelector: Another CSS selector. This specifies which HTML elements should be extracted from the Ajax-loaded content and added to the container.

The rating.css inserts unicode star characters and overlaps the outlines with filled-in versions to create the rating effect. Using a width equivalent to the rating value's percentage of the maximum (10 in this case), the filled-in stars cover the right amount of space on top of the hollow ones, allowing for decimal ratings. In the markup, a title attribute and a nested <i> tag are given with text equivalents so that the ratings remain accessible, such as to those using screen readers.

Finally, the movie_list.css uses something called floats to position the rank to the far left and the rating to the far right, even though in the markup they come before the movie's title. The rating is enhanced by adding a period following the plain numeric value, and the year is wrapped in parentheses.