实现简单的滚动加载，动态最加到当前页面。

要使用这个代码需要引入jq库，例如jquery-1.8.3.min.js。

style部分

<style>
        .content {
            width: 500px;
            border: 1px solid #0e87e3;
            margin-top: 100px;
        }

        .content ul li {
            list-style: none;
            width: 130px;
            display: inline-block;
            margin: 4px;
        }

        .content li img {
            width: 130px;
        }
    </style>

html部分

<div class="content">
    <ul id="refreshContainer">
        <!-- 默认第一页已加载的部分 -->
        <li><img src="./images/img_ (1).jpg"><span>1</span></li>
        <li><img src="./images/img_ (2).jpg"><span>2</span></li>
        <li><img src="./images/img_ (3).jpg"><span>3</span></li>
    </ul>
</div>
<input type="text" id="nowPage" value="0" placeholder=""/>

<div class="load-tip-div">
    <span class="load-tip">滚动加载</span>
</div>

js部分

<script type="text/javascript">

    $(document).ready(function () {
        var loading = true;

        //获取追加的内容
        function getcontent() {
            var pageId = jQuery("#nowPage");
            pageId.val(parseInt(pageId.val()) + 1);
            var page = pageId.val();
            //console.log(page);
            if (parseInt(page) <= 10) { // 10后台数据总页数， 这里暂时写死，可以后台获取放到hidden input
                jQuery.ajax({
                    url: 'test.php?page=' + page,
                    type: "get",
                    async: false,
                    beforeSend: function () {
                        loading = false;
                    },
                    success: function (s) {
                        console.log(s);
                        jQuery('#refreshContainer').append(s);
                        $(".load-tip-div").css({"display": "none"});
                    },
                    complete: function () {
                        loading = true;
                    }
                })
            } else {
                $(".load-tip").html("加载完毕");
                $(".load-tip-div").css({"display": ""});
            }
        }

        //滚动到底部的判断
        $(window).scroll(function () {console.log("----",$(document).scrollTop() , $(window).height() , $(document).height());
        var wl = $(document).scrollTop();
            if(wl%20===0 && wl + $(window).height() > $(document).height() - 20){
                if(loading){
                    getcontent();
                }
            }
        });
    });
</script>

附加一个手动点击加载的js

<!--{if $page<$total_page}--><div class="add-content">More</div><!--{/if}-->
<script type="text/javascript">
var page = {$page};
var total_page = {$total_page};
var str_new = '';
jQuery('.add-content').click(function(){
	if(jQuery(this).hasClass('loading_data'))
	{
		return false;
	}
	jQuery(this).addClass('loading_data').text('Loading');
	page += 1;
	if(page <= total_page)
	{
		jQuery.ajax({
			type:'post',
			url: 'test.php?page=' + page,
			success:function(re){
				var re = eval('('+re+')');
				for(var i in re)
				{
				    str_new += ''; //组装html
				}
				jQuery(str_new).insertBefore('.add-content');

			},
			complete:function(){
				jQuery('.add-content').removeClass('loading_data').text('More');
				if(page >= total_page)
				{
					jQuery('.add-content').hide();
				}
			}
		});
	}
});
</script>