masonry+infinitescrol 插件来实现瀑布流布局产生的有关问题。

masonry+infinitescrol 插件来实现瀑布流布局产生的问题。。。。。
在使用插件来布局时，瀑布流布局已经布局好，但是在使用  infinite scroll 来无限加载时出现了问题，默认应该是 到滚动条滚动到最低端，或距离最低端有些距离时开始新加载内容，但我看管方的Demo 没有问题。我拿来问题出现了，不管滚动条距离底下多少，只要滚动一下，它就加载。郁闷。。。。。我来发图给大家看一下。

官方的Demo：http://masonry.desandro.com/demos/infinite-scroll.html


图片1：



图片2：




HTML 代码：

<!--容器代码-->

<div id="container">



    <div class="waterfall">

        <a href=""><img alt="" src="images/P (1).jpg"></a>

        <p>精致体验：LOFTER追求精致入微的视觉和交互体验，为每一片内容精心度量，让你的视角所触及的每一个像素，都蕴含独具匠心的精致设计。</p>

    </div>

    <div class="waterfall">

        <a href=""><img alt="" src="images/P (1).jpg"></a>

        <p>精致体验：LOFTER追求精致入微的视觉和交互体验，为每一片内容精心度量，让你的视角所触及的每一个像素，都蕴含独具匠心的精致设计。</p>

    </div>



    <!-- 还有好多。。。省略了。。。 -->

  

</div>



<!--分页代码-->

<div class="navigation" id="pnavigation">

     <a href="page/2.html">下一页</a>

</div>

CSS代码：

#container { position: relative; margin:0px auto; padding:15px 10px; }

.waterfall {

	position: absolute;

	top:1000px;  

	left:-1000px;

	border: 1px solid #DFDFDF;

	border-radius: 5px;

	-webkit-border-radius: 5px;

	-moz-border-radius: 5px;

	padding: 10px;

	background-color: #FFF;

	width:192px;

	margin-top:15px;

	-webkit-transition: left .3s ease-in-out,top .3s ease-in-out;

	   -moz-transition: left .5s ease-in-out,top .5s ease-in-out;

	     -o-transition: left .3s ease-in-out,top .3s ease-in-out;

	        transition: left .3s ease-in-out,top .3s ease-in-out;

}

.navigation { display:none; padding:10px 0px; text-align:center; }

.navigation a { display:inline-block; padding:2px 5px; border:1px solid #999; background:#FFF; margin:0px 10px; text-shadow:0px 1px 2px rgba(0,0,0,0.5); }

JavaScript 代码：

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="js/jquery.masonry.min.js"></script>

<script type="text/javascript" src="js/jquery.infinitescroll.min.js"></script>

<script type="text/javascript">

  $(function(){

    

    var $container = $('#container');

    

    $container.imagesLoaded(function(){

      $container.masonry({

        itemSelector: '.waterfall',

        gutterWidth:15,

        isFitWidth:true,

        isResizableL:true,

        columnWidth: 214

      });