美文网首页
jq下拉加载更多

jq下拉加载更多

作者: 默色留恋 | 来源:发表于2017-12-05 15:25 被阅读0次

    1.css

    <style>
    *{padding:0;margin:0;}
    .bigbox{
        height:700px;
    }
    .box{
        border:1px solid red;
        margin-top:20px;
        height:600px;
        color:grey;
    }
     </style>
    

    2.html

    <body>  
      <div>下拉加载更多</div>  
      <div class="bigbox">  
        <div class="box"></div>  
      </div>  
    </body>  
    

    3.js

    <script>
      $(function(){
        $(window).scroll(function(){
            var aa = $(window).scrollTop(); //当前滚动条滚动的距离
            var bb = $(window).height();//浏览器当前窗口可视区域高度
            var cc = $(document).height(); //浏览器当前窗口文档的高度 
          
            if(cc <= aa+bb){
                $(".bigbox").append($(".box").clone()); 
            }
        })
      })
    </script>
    

    相关文章

      网友评论

          本文标题:jq下拉加载更多

          本文链接:https://www.haomeiwen.com/subject/ordcixtx.html