Ajax瀑布流 前进后退,ajax瀑布流实现demo分享(附代码)

这次给大家带来ajax瀑布流实现demo分享(附代码)，ajax瀑布流实现demo分享的注意事项有哪些，下面就是实战案例，一起来看一下。

最近听朋友们说起瀑布流挺多的，自己就去研究下了，一个简单的原生demo，分享给大家...

简单分为三个文档，有详细的注释：img；ajax.php；demo.php

其中img文件夹中放入图片 1.jpg；2.jpg;3.jpg....

ajax.php页面

//模拟从数据库读取数据

$arr = array();

$op = opendir('./img'); //打开目录

//循环读取目录

while (($file = readdir($op)) !== false) {

//过滤点和点点

if ($file == '.' || $file == '..') {

continue;

}

$arr[] = $file;

}

closedir($op); //关闭目录

echo json_encode($arr);

demo.html页面

瀑布流

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)

}

}

相信看了本文案例你已经掌握了方法，更多精彩请关注php教程其它相关文章！

推荐阅读：

怎么配置谷歌浏览器支持file协议的AJAX请求

如何用php接收ajax提交到后台的数据