infiniteScroll.js

/* ==========================================================================
    CHEFS
   ========================================================================== */

//GET NB ITEMS
function getItemPerLine() {
    var iViewportWidth = $(document).width();
    var iNbItems = 5;
    if (iViewportWidth < 1240) {
        iNbItems = 4;
        if (iViewportWidth < 1024) {
            iNbItems = 3;
        }
    }

    return iNbItems;
}

//INFINITE SCROLL
function chefFn() {

    if ($('.chefHomeResults').length) {

        var iIterationMax = 3;
        var nbLinesToDisplay = 2;
        var iIteration = 0;
        var triggered = false;
        var iNbItemDelta = 0;
        var iNbItemsDisplayed = $('.chefResultsItem').length;
        var iNbItemsTotal = parseInt($('.infiniteLoader').data('nb-items-total'), 10);
        var iNbItemsPerLine = getItemPerLine();

        //AJUST NB INITIAL ITEMS
        //remove items from the 10 initial items to keep 2 lines whatever the viewport width
        var iNbItemDeltaInit = iNbItemsDisplayed - (iNbItemsPerLine * nbLinesToDisplay);
        var aListItems = $('.chefHomeResults').find('.chefResultsItem');
        aListItems.slice(aListItems.length - iNbItemDeltaInit).remove();
        //update nb item displayed
        iNbItemsDisplayed = $('.chefResultsItem').length;

        //CLICK EVENT
        $('.infiniteLoader .btn').on('click', function() {

            iNbItemsPerLine = getItemPerLine();

            iNbItemDelta = iNbItemsPerLine - (iNbItemsDisplayed % iNbItemsPerLine);
            if (iNbItemDelta == iNbItemsPerLine) {
                iNbItemDelta = 0;
            }

            //Call ajax
            var jqxhr =
                $.ajax({
                    url: $('.infiniteLoader').data('path'),
                    method: 'POST',
                    data: {
                        nbItemsToDisplay: iNbItemsPerLine * nbLinesToDisplay + iNbItemDelta,
                        start: iNbItemsDisplayed
                    }
                })
                .done(function(response) {
                    $('.chefHomeResults').append(response);
                    iIteration++;
                    if (iIteration >= iIterationMax) {
                        $('.infiniteLoader .btn').removeClass('loadingLayer');
                    }
                    iNbItemsDisplayed = $('.chefResultsItem').length;
                    if (iNbItemsDisplayed >= iNbItemsTotal) {
                        $('.infiniteLoader').remove();
                    }
                })
                .fail(function() {
                    console.log('ajax load chefs error');
                })
                .always(function() {
                    triggered = false;
                });
        });


        //SCROLL EVENT
        $(window).on('scroll', function() {
            if ($('.infiniteLoader').length) {
                var sy = $(window).scrollTop();
                var iLoaderOffset = $('.infiniteLoader').offset().top;
                var iwindowHeight = $(window).height();
                var ifooterHeight = $('.footerSticky').height();
                if (sy >= (iLoaderOffset - iwindowHeight + ifooterHeight) && iIteration < iIterationMax && triggered === false) {
                    triggered = true;
                    $('.infiniteLoader .btn').trigger('click');
                }
            }
        });
    }

}

item.php

<?php if(!isset($_REQUEST['nbItemsToDisplay']) || !isset($_REQUEST['start'])) :
    echo 'null';
else :
    $nbItemsToDisplay = $_REQUEST['nbItemsToDisplay'];
 	$start = $_REQUEST['start'];

 	for ($i = 0; $i < $nbItemsToDisplay; $i++) :
?>
<div class="chefResultsItem linkParent" itemscope itemtype="http://schema.org/Person">
    <figure>
        <img src="/images/dynamic/img-chef-item.jpg" alt="Michel Rochedy &amp; Stéphane Buron" height="166" width="166" itemprop="image">
        <figcaption>
            <a class="linkBlock" href="#_"><span itemprop="name">Michel Rochedy &amp; Stéphane Buron</span></a>
        </figcaption>
    </figure>
    <div class="city" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
        <span itemprop="addressLocality">Courchevel 1850</span>
    </div>
</div>
<?php
	endfor;
	endif;
?>

page.html

<div class="col-1-1 chefHomeResults">
    {% for i in 0..9 %}
        {% include "C2isOneTeaBundle:includes:07.chef/chef-results-item.html.twig" %}
    {% endfor %}
</div>

<div class="infiniteLoader alignCenter" data-nb-items-total="55" data-path="{{ asset('fixtures/chefs/loadItems.php') }}">
    <button class="btn btnGold loadingLayer">Load more</button>
</div>