Ajax瀑布流无限加载

 

使用瀑布流无限加载技术，取消了分页按钮，当用户浏览完当前页面数据之后会自动加载数据，无缝衔接。

瀑布流技术：当滚动条拉到距离底部某一个位置的时候触发一个事件，通过AJAX请求后台数据，从而代替分页。

//当滚动条发生变化时触发这个函数，到一定值时触发Ajax请求

window.onscroll=function(){

    var windowHeight=document.documentElement.clientHeight;//可视区高度

    var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;//滚动条高度

    var scrollH=document.body.scrollHeight;

    if(scrollTop + windowHeight >= scrollH - 20 ）{

        Ajax('JSON', false).get('http://127.0.0.1:3000/getData', function(data) {//发送AJAX请求，同步方式

        for(var i = 0; i < data.length; i++){//拿到数据后创建节点，多个数据用循环

            var img=document.createElement('img');//创建标签

            img.src=data[i].url;//绑定URL

            document.body.appendChild(img);//放到页面中显示

        }

        layout();//追加新的节点后重新布局页面

       });

    }

}

//布局页面中的img排列方式

function layout(){

...

}