加载更多的实现原理？？以下代码不是很明白

Question

<div class="text_a2">

    <ul class="download_box">
        <li>
            <div class="download_img">
                <a>
                    <img src="images/down_ima01.png">
                </a>
                <div class="download_text hidden">
                    <div class="download_l">
                        <p>电商系统源码</p>
                        <p>更新时间：2016-10-26</p>
                        <p class="download_green">下载次数:1002次</p>
                    </div>
                    <div class="download_r">
                        <a href="download_detail.html" >立即下载</a>
                    </div>
                </div>
            </div>
        </li>
        <li>
            <div class="download_img">
                <a>
                    <img src="images/down_ima02.png">
                </a>
                <div class="download_text hidden">
                    <div class="download_l">
                        <p>电商系统源码</p>
                        <p>更新时间：2016-10-26</p>
                        <p class="download_green">下载次数:1002次</p>
                    </div>
                    <div class="download_r">
                        <a href="download_detail.html" >立即下载</a>
                    </div>
                </div>
            </div>
        </li>
        <li>
            <div class="download_img">
                <a>
                    <img src="images/down_ima03.png">
                </a>
                <div class="download_text hidden">
                    <div class="download_l">
                        <p>电商系统源码</p>
                        <p>更新时间：2016-10-26</p>
                        <p class="download_green">下载次数:1002次</p>
                    </div>
                    <div class="download_r">
                        <a href="download_detail.html" >立即下载</a>
                    </div>
                </div>
            </div>
        </li>
        <li>
            <div class="download_img">
                <a>
                    <img src="images/down_ima04.png">
                </a>
                <div class="download_text hidden">
                    <div class="download_l">
                        <p>电商系统源码</p>
                        <p>更新时间：2016-10-26</p>
                        <p class="download_green">下载次数:1002次</p>
                    </div>
                    <div class="download_r">
                        <a href="download_detail.html" >立即下载</a>
                    </div>
                </div>
            </div>
        </li>
        <li>
            <div class="download_img">
                <a>
                    <img src="images/down_ima05.png">
                </a>
                <div class="download_text hidden">
                    <div class="download_l">
                        <p>电商系统源码</p>
                        <p>更新时间：2016-10-26</p>
                        <p class="download_green">下载次数:1002次</p>
                    </div>
                    <div class="download_r">
                        <a href="download_detail.html" >立即下载</a>
                    </div>
                </div>
            </div>
        </li>
        <li>
            <div class="download_img">
                <a>
                    <img src="images/down_ima06.png">
                </a>
                <div class="download_text hidden">
                    <div class="download_l">
                        <p>电商系统源码</p>
                        <p>更新时间：2016-10-26</p>
                        <p class="download_green">下载次数:1002次</p>
                    </div>
                    <div class="download_r">
                        <a href="download_detail.html" >立即下载</a>
                    </div>
                </div>
            </div>
        </li>
        <li>
            <div class="download_img">
                <a>
                    <img src="images/down_ima04.png">
                </a>
                <div class="download_text hidden">
                    <div class="download_l">
                        <p>电商系统源码</p>
                        <p>更新时间：2016-10-26</p>
                        <p class="download_green">下载次数:1002次</p>
                    </div>
                    <div class="download_r">
                        <a href="download_detail.html" >立即下载</a>
                    </div>
                </div>
            </div>
        </li>
        <li>
            <div class="download_img">
                <a>
                    <img src="images/down_ima05.png">
                </a>
                <div class="download_text hidden">
                    <div class="download_l">
                        <p>电商系统源码</p>
                        <p>更新时间：2016-10-26</p>
                        <p class="download_green">下载次数:1002次</p>
                    </div>
                    <div class="download_r">
                        <a href="download_detail.html" >立即下载</a>
                    </div>
                </div>
            </div>
        </li>
        <li>
            <div class="download_img">
                <a>
                    <img src="images/down_ima06.png">
                </a>
                <div class="download_text hidden">
                    <div class="download_l">
                        <p>电商系统源码</p>
                        <p>更新时间：2016-10-26</p>
                        <p class="download_green">下载次数:1002次</p>
                    </div>
                    <div class="download_r">
                        <a href="download_detail.html" >立即下载</a>
                    </div>
                </div>
            </div>
        </li>
        <li>
            <div class="download_img">
                <a>
                    <img src="images/down_ima01.png">
                </a>
                <div class="download_text hidden">
                    <div class="download_l">
                        <p>电商系统源码</p>
                        <p>更新时间：2016-10-26</p>
                        <p class="download_green">下载次数:1002次</p>
                    </div>
                    <div class="download_r">
                        <a href="download_detail.html" >立即下载</a>
                    </div>
                </div>
            </div>
        </li>
        <li>
            <div class="download_img">
                <a>
                    <img src="images/down_ima02.png">
                </a>
                <div class="download_text hidden">
                    <div class="download_l">
                        <p>电商系统源码</p>
                        <p>更新时间：2016-10-26</p>
                        <p class="download_green">下载次数:1002次</p>
                    </div>
                    <div class="download_r">
                        <a href="download_detail.html" >立即下载</a>
                    </div>
                </div>
            </div>
        </li>
        <li>
            <div class="download_img">
                <a>
                    <img src="images/down_ima03.png">
                </a>
                <div class="download_text hidden">
                    <div class="download_l">
                        <p>电商系统源码</p>
                        <p>更新时间：2016-10-26</p>
                        <p class="download_green">下载次数:1002次</p>
                    </div>
                    <div class="download_r">
                        <a href="download_detail.html" >立即下载</a>
                    </div>
                </div>
            </div>
        </li>
    </ul>
    <div class="more_box">
        <img src="images/more2.png" class="more1 mpng">
    </div>
</div>

<script type="text/javascript">
$(document).ready(function(e) {

$(".more1").hide();
var w=$(window).width();
var h=$(window).height();
var $category=$('.download_box li:gt(5)');
var index=$('.download_box li').length;
$category.hide();
if(index>6)
   {
    $(".more1").show();
    }
    else
        $(".more1").hide();
var n=1;
$(".more1").click(function(){
    $(".mpng").css("opacity","0");
    var i=6+3*n;    
    var $category_next=$(".download_box li:lt("+i+")");
    setTimeout(function(){
        $category_next.show();
        $(".mpng").css("opacity","1");
    },1000);
    n++;
    if(6+3*(n-1)>=index)
        {
            $(".more1").hide();    
        }
    });           

});
$(function(){

var H=$(window).height();
var winBox=$("body").height();
$(window).scroll(function () {
if ($(window).scrollTop() >= winBox-H) {
    setTimeout(function(){
    $(".more1").click();
    winBox=$("body").height();},2000);
}
})
})

</script>

Answer 1

$(window).scroll(function () {
if ($(window).scrollTop() >= winBox-H) {
    setTimeout(function(){
    $(".more1").click();
    winBox=$("body").height();},2000);
}
})
})

$(".more1").click();这个点击加载应该知道吧

然后就是，当页面滚动高度>= winBox-H时，触发点击加载

---

简单来说,滚动到相应地方就触发事件加载数据