原生ajax瀑布流demo分享(必看篇)

2020-11-27 来源：保捱科技网

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

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

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

ajax.php页面

<?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页面

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>瀑布流</title>
 <style>
 li{
 list-style: none;
 float: left;
 margin:4px;
 }
 img{
 border:4px solid black;
 }
 </style>
</head>
<body>
 <ul id="ul">
 <!-- <li><img src="./img/1.jpg" height="300" alt=""></li> -->
 </ul>
</body>
<script>
 //找对象
 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 = '<img src="./img/'+obj[k]+'" height="300" />';
 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)
 }
 }
</script>
</html>

以上这篇原生ajax瀑布流demo分享(必看篇)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

显示全文

全部栏目

原生ajax瀑布流demo分享(必看篇)