当不写入extraScrollPx参数时,在firefox和chrome中都出现了只要下拉滚动条就会触发载入新的数据,而不是默认的当滚动条离屏幕底部150px才会触发.

但当写入extraScrollPx参数时,无论后面加是数字是多少,都出现只要下拉滚动条,就会触发载入新的数据,而且是无限载入,就像一直有人在拖滚动条一样.

这会是哪里出问题了.应该怎么调试?

html

<!-- Primary Content Starts -->
        <p class="col-md-9">
            <p class="row w-container" >
                <p class="waterfall">
                      <p class="product-col" style="width: 250px;">
                        <p class="image">
                           <a href ="" alt="product" class="img-responsive"></a>
                        </p>
                        <p class="title">
                           <a href =""> <h4>Propet Wall Street Mens Dress Shoes</h4></a>
                        </p>
                    </p>
            <!-- Product Grid Display Ends -->
        </p>
        <!-- Primary Content Ends -->

    </p>
</p>


<p id="navigation"><a href="page=1"></a></p>

js

$(function(){
var $container = $('.w-container');
    $container.imagesLoaded( function(){
        $container.masonry({
            itemSelector : '.product-col',
            gutter : 20,
            columnWidth: 250,
            isAnimated: true,
            isFitWidth: true, //自适应宽度
            isResizableL:true
        });
    });

    $('.waterfall').infinitescroll({
        navSelector: '#navigation',
        nextSelector: '#navigation a',
        itemSelector: '.product-col',
        debug: true,
        errorCallback: function() {
            console.log('error');
        },
        //dataType: 'html',
        dataType: 'json',
        template: function(data) {
        //从服务器返回的json数据在此处理成html,然后返回给函数
            var tem = '';
            $.each(data, function(key, value) {
                //fixme:html拼接而成,有待优化
                //处理成html返回
            })
            console.log(tem);
            return tem;
        },
        loading: {
            msgText: 'loading',
            finishedMsg: 'finished',
            selector: '.loading'
        }
    }, function(newElems) {
        var $newElems = $(newElems).css({opacity: 0});
        $container.imagesLoaded(function(){
            $newElems.animate({ opacity: 1});
            $container.masonry('appended', $newElems);
        });

    });
});