前端小菜,请大家帮忙看下一个用 infinitescroll 插件做瀑布流的问题

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

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

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


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

</div>
</div>
<div id="navigation"><a href="page=1"></a></div>
```


##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: '.productcol',
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);
});

});
};
```