滾動條滑至底部自動加載內容

css部分：

<style type="text/css">
        body{
            background-color: #808080;
        }
        #main{
            margin:0 auto;
            width: 960px;
        }
        #content{
            position: absolute;
            width: 960px;
        }
        #img{
            margin: 0;
            padding: 0;
        }
        #img li{
            list-style-type: none;
            background-color: salmon;
            margin: 0;
            margin-top:10px;
            border-bottom: solid 1px hotpink;
            text-align: center;
            height:30px;
        }
    </style>

html部分：

<div id="main">
    <div id="content">
        <ul id="img">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
            <li>14</li>
            <li>15</li>
            <li>16</li>
            <li>17</li>
            <li>18</li>
            <li>19</li>
            <li>20</li>
            <li>21</li>
            <li>22</li>
            <li>23</li>
            <li>24</li>
            <li>25</li>
            <li>26</li>
            <li>27</li>
            <li>28</li>
            <li>29</li>
            <li>30</li>
        </ul>
    </div>
</div>

js部分：js部分：（此處須要引入jquery.js）

<script type="text/javascript">
    //獲取列表中的原有內容
    var content=document.getElementById("img").innerHTML;
    //每被調用一次，就將網頁原有內容添加一份，這個你們能夠寫本身要加載的內容或指令
    function addLi(){
        document.getElementById("img").innerHTML+=content;
    }
    /*
     * 監聽滾動條，原本不想用jQuery可是發現js裏面監聽滾動條的事件很差添加，這邊就引用了Jquery的$(obj).scroll();這個方法了
     */
    $(window).scroll(function(){
        //下面這句主要是獲取網頁的總高度，主要是考慮兼容性因此把Ie支持的documentElement也寫了，這個方法至少支持IE8
        var htmlHeight=document.body.scrollHeight||document.documentElement.scrollHeight;
        //clientHeight是網頁在瀏覽器中的可視高度，
        var clientHeight=document.body.clientHeight||document.documentElement.clientHeight;
        //scrollTop是瀏覽器滾動條的top位置，
        var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
        //經過判斷滾動條的top位置與可視網頁之和與整個網頁的高度是否相等來決定是否加載內容；
        if(scrollTop+clientHeight==htmlHeight){
            addLi();
        }
    })
</script>