日期:2014-05-16  浏览次数:20330 次

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,
        isResi