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

2024-09-01 08:30:42

字体：大中小

来源：转载

供稿：网友

最近听朋友们说起瀑布流挺多的，自己就去研究下了，一个简单的原生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通信对象的方法

下一篇：基于Ajax的formData图片和数据上传