Бесконечный скролл на jQuery

В данной статье рассмотрим как сделать простенький бесконечный скролл с использованием jQuery.

Задача

Предположим у нас есть несколько новостей, и нам необходимо вывести на страницу первые 6, а остальные подгружать по мере прокрутки страницы вниз.

Html

Создадим html-страничку для отображения новостей.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Бесконечный скролл</title>
    <script type="text/javascript" src="http://ajax.googlesapi.com/ajax/libs/jquery/jquery.min.js"></script>
    <style>
        .news {
            padding: 0;
            list-style: none;
        }
        .news li {
            margin-top: 10px;
            padding: 100px 20px;
            background-color: RGB(200, 200, 200);
        }
        .news .new {
            background-color: lightblue;
        }
    </style>
</head>
<body>
<ul class="news">
    <li>Новость 1</li>
    <li>Новость 2</li>
    <li>Новость 3</li>
    <li>Новость 4</li>
    <li>Новость 5</li>
    <li>Новость 6</li>
</ul>
<div class="loading" style="text-align: center; display: none">
    <img src="loading.gif" style="width: 50px">
</div>
<script src="scroll.js"></script>
</body>
</html>

scroll.js - скрипт выполняющий скроллинг

loading.gif - изображение для анимации процесса ожидания новостей

PHP

Создадим файл get.php, который будет содержать новости и выдавать их при запросе. Этот код сделан исключительно для примера.

<?php
$list = [
   'Новость 7',
   'Новость 8',
   'Новость 9',
   'Новость 10',
   'Новость 11',
   'Новость 12',
   'Новость 13',
   'Новость 14',
   'Новость 15',
];
//блок
$page = $_GET['page'];
//количество новостей в блоке
$count = 3;
if (($page * $count) > count($list)) {
    echo '';
} else {
    $result = '';
    for ($i = ($page - 1) * $count; $i < $page * $count; $i++) {
       //только для вывода анимации
       sleep(1);
       $result .= '<li class="new">' . $list[$i] . '</li>';
    }
    echo $result;
}

Я добавил функции задержки sleep(1), которая просто задерживает загрузку новости на 1 секунду, чтобы показать анимацию. В своих реализация эту функцию нужно убрать.

$page - номер блока новостей

$page - количество новостей которые возвращаются в ответе

jQuery

Осталось создать файл scroll.js, который и будет содержать код бесконечного скролла.

jQuery(document).ready(function ($) {
   //разрешаем выводить данные
   var block = true;
   //номер страницы для вывода
   var page = 0;
   //скроллинг
   $(window).scroll(function () {
      if ($(window).height() + $(window).scrollTop() >= $(document).height() && block) {
         block = false;
         page++;
         $.ajax({
                type: 'GET',
                url: 'get.php?page=' + page,
                success: function (list) {
            stopLoading();
            if (list == '') {
               block = false;
            } else {
               $('.news').append(list);
               block = true;
            }
                }
            });
            startLoading();
        }
   });
   //старт анимация ajax
   function startLoading() {
      $('.loading').fadeIn(300);
   }
   //конец анимации ajax
   function stopLoading() {
      $('.loading').fadeOut();
   }
});

Самая главная часть кода - это проверка на достижение самого низа страницы:

if ($(window).height() + $(window).scrollTop() >= $(document).height() && block) {

Далее делается ajax-запрос к новостям. Необходимо указать номер блока, чтобы вывести нужную "порцию" новостей.

Функции startLoading() и stopLoading() просто анимируют процесс загрузки новостей.

Ну вот и всё. Вот так просто можно сделать бесконечный скролл.