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

前端  /  管理员 发布于 4年前   213

最近听朋友们说起瀑布流挺多的，自己就去研究下了，一个简单的原生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="//article/./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="//article/./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的formData图片和数据上传
    下一条：
    ASP.NET MVC中使用jQuery时的浏览器缓存问题详解

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客