ajax如何使用原生瀑布流,瀑布流原生ajax，demo(示例代码)

瀑布流

li{

list-style: none;

float: left;

margin:4px;

}

img{

border:4px solid black;

}

//找对象

var ul = document.getElementById(‘ul‘);

//拿数据

function getData()

{

var ajax = new XMLHttpRequest();

ajax.open(‘get‘, ‘ajax.php‘, true);

ajax.send();

ajax.onreadystatechange = function()

{

if (ajax.readyState == 4 && ajax.status == 200) {

var res = ajax.responseText;

//处理结果

var obj = JSON.parse(res);

for (var k in obj) {

// obj[k];

//创建节点

var li = document.createElement(‘li‘);

                    li.innerHTML = ‘‘;

ul.appendChild(li);

}

}

}

}

getData();

var timer;

//判断滚动条的高度，加载第二批文件

window.onscroll = function()

{

//获取三高

var zGao = document.documentElement.scrollHeight;//总高度

var lGao = document.documentElement.clientHeight;//浏览器可用高度

var gGao = document.body.scrollTop || document.documentElement.scrollTop;//滚出去的高度

// console.log(zGao, lGao, gGao);

document.title = zGao + ‘_‘ + lGao + ‘_‘ + gGao;

if (zGao - lGao - gGao < 500) {

clearTimeout(timer);

//用一次性定时器解决连续加载的问题

timer = setTimeout(function(){

getData();

}, 200)

}

}