瀑布流无限加载infinitescroll插件与masonry插件使用

  网页前端          220 阅读          2018-06-26

无限滚动原理:无限滚动的实现原理就是当你在网页上的滚动条滚动到离网页底部一定长度的时候,触发某ajax函数(infinite-scroll内已经封装好),往后台加载文件或者数据,又或者从外部引入静态html形式文件。

实例:

<!DOCTYPE HTML>
<html>
  <head>
    <title>无限瀑布流</title>
    <style type="text/css">
      .container{padding:20px;}
      .box{margin-bottom:20px;float:left;width:220px;}
      .box .image_box{width:100%;height:300px;background:#FCF;}
      #infscr-loading{text-align:center;padding:10px;background:#000;opacity:0.8;filter:alpha(opacity=80);color:#FFF;}
      #infscr-loading{position:fixed;bottom:0px;left:45%;z-index:9999;width:200px;}
    </style>
    <script src="http://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/masonry/2.1.08/jquery.masonry.min.js"></script>
    <script src="http://cdn.bootcss.com/jquery-infinitescroll/2.0b2.120519/jquery.infinitescroll.min.js"></script>
    <script type="text/javascript">
    $(function(){
    var $container = $('#masonry');
    $container.imagesLoaded( function(){
        $container.masonry({
            itemSelector : '.box',
            gutterWidth : 20,
            isAnimated: true,
        });
    });
    $container.infinitescroll({
        navSelector  : '#page-nav',
        nextSelector : '#page-nav a',
        itemSelector : '.box',
        loading: {
            finishedMsg: '没有更多的页面加载。',
            loadingText:'加载中',
            img: 'images/loading.gif'
        }
    },function(newElements){
            var $newElems = $( newElements ).css({ opacity: 0 });
            $newElems.imagesLoaded(function(){
                $newElems.animate({opacity:1});
                $container.masonry( 'appended', $newElems, true ); 
            });
        }
    );
    })
    </script>
  </head>
  <body>
  <div id="masonry" class="container">
  <div class="box"><div class="image_box">a</div></div>
  <div class="box"><div class="image_box">a<br>b</div></div>
  <div class="box"><div class="image_box">a<br>c</div></div>
  <div class="box"><div class="image_box">a<br>d<br>f</div></div>
  <div class="box"><div class="image_box">a</div></div>
  <div class="box"><div class="image_box">a</div></div>
  <div class="box"><div class="image_box">a<br>d<br>c<br>ad</div></div>
  <div class="box"><div class="image_box">a</div></div>
  <div class="box"><div class="image_box">a</div></div>
</div>
<div id="page-nav"><a href="data.jsp?page=1"></a></div>
  </body>
</html>

 

 

 

支付宝二维码
微信二维码

扫码打赏,您说多少就多少!

感谢您的打赏,我们会更加努力的更新站点!

发表评论

  • 暂无评论,快来抢沙发!