jquery scroll 自动加载内容

最新推荐文章于 2022-09-05 10:55:13 发布

错_对

最新推荐文章于 2022-09-05 10:55:13 发布

阅读量3.1k

点赞数

分类专栏： javascript 文章标签： javascript 滚动条事件自动加载数据

本文链接：https://blog.csdn.net/Free_Program_1314/article/details/46350761

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

当拖动滚动条时，自动加载内容

</pre><pre name="code" class="javascript">1. 首先计算li的总数

</pre><pre code_snippet_id="683281" snippet_file_name="blog_20150603_5_4812406" name="code" class="javascript">2. 计算每一行显示的li的数量

</pre><pre code_snippet_id="683281" snippet_file_name="blog_20150603_7_6227327" name="code" class="javascript">3. 计算li自身的高度

</pre><pre code_snippet_id="683281" snippet_file_name="blog_20150603_9_8689022" name="code" class="javascript">4. 计算li的margin-bottom高度

</pre><pre code_snippet_id="683281" snippet_file_name="blog_20150603_11_4040658" name="code" class="javascript">///要实现的效果，当滚动条向下滚动到快接近底部时，自动加载内容

</pre><pre code_snippet_id="683281" snippet_file_name="blog_20150603_13_9326253" name="code" class="javascript">首先计算滚动条的scrollTop，即距离滚动条顶部的距离,计为scroll_top

</pre><pre code_snippet_id="683281" snippet_file_name="blog_20150603_15_5135237" name="code" class="javascript">其次，计算出接近滚动条底部的距离，计为scroll_height

</pre><pre code_snippet_id="683281" snippet_file_name="blog_20150603_17_420833" name="code" class="javascript">再次，当 <span style="font-family: Arial, Helvetica, sans-serif;">scroll_top >  </span><span style="font-family: Arial, Helvetica, sans-serif;">scroll_height 时，自动加载内容,比如通过ajax请求获取数据</span>

<span style="font-family:Arial, Helvetica, sans-serif;">
</span>

<span style="font-family:Arial, Helvetica, sans-serif;">重点就是如何计算出 scroll_height 这个高度</span>

<span style="font-family:Arial, Helvetica, sans-serif;">
</span>

<span style="font-family:Arial, Helvetica, sans-serif;">代码实现如下：
</span><div>
</div>

</pre><pre code_snippet_id="683281" snippet_file_name="blog_20150603_23_4915199" name="code" class="javascript">

<pre name="code" class="javascript"><!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<ul id="scroll_ul"  current_page="1">
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>


</ul>
<style type="text/css">
    ul{
        width:350px;
        height:500px;
        list-style-type: none;
        overflow-y: scroll;
        padding: 8px;
        border:1px solid #acacac;
    }

    ul li{
        width:100px;
        height:200px;
        margin-left: 10px;
        float: left;
        margin-bottom: 10px;
    }

    img{
        width:100px;
        height:200px;
    }

</style>
<script type="text/javascript" src="jquery-1.11.3.js"></script>
<script type="text/javascript">
$("#scroll_ul").on("scroll", function(evt){
    var ul_height = $(this).height();
    var scroll_top = $(this).scrollTop();
    var li = $("#scroll_ul li").length;

    var li_height = $("#scroll_ul li").eq(0).height();
    var li_margin_buttom = $("#scroll_ul li").eq(0).css("margin-bottom").replace("px", '');

    var li_list_height = Math.ceil((li-9)/3);

    var scroll_height = li_list_height*( parseInt(li_height) + parseInt(li_margin_buttom));

    if(scroll_top > scroll_height) {
        var page = parseInt( $(this).attr("current_page") );
        $(this).attr("current_page", page+1);
        $("#scroll_ul").append($("#scroll_ul").children("li").eq(0).clone());
       
        $.ajax({
            'url':'',
            'type':"post",
            'async':true,
            'data':{"page":page+1},
            'success':function(){
                
            }
                    
        });
    }


});

</script>

</body>
</html>