집 >웹 프론트엔드 >JS 튜토리얼 >Ajax Waterfall 흐름은 데모 공유를 실현합니다(코드 포함).

Ajax Waterfall 흐름은 데모 공유를 실현합니다(코드 포함).

php中世界最好的语言원래의: 2018-03-31 16:25:001497검색

이번에는 Ajax Waterfall 흐름 구현(코드 포함) 데모 공유를 가져오겠습니다. Ajax Waterfall 흐름 구현 데모 공유에 대한 Notes는 무엇인가요?

최근 친구들에게 폭포수 흐름이 많다는 소식을 듣고 직접 공부하러 갔습니다. 간단한 네이티브 데모를 여러분과 공유하고 있습니다...

간단히 세 개의 문서로 나누어 자세한 설명이 있습니다. : img ;ajax.php;demo.php

사진 1.jpg를 img 폴더에 넣습니다. 2.jpg; 3.jpg....

ajax.php 페이지

<?php
　　//模拟从数据库读取数据
  $arr = array();
  $op = opendir(&#39;./img&#39;);  //打开目录
  //循环读取目录
  while (($file = readdir($op)) !== false) {
    //过滤点和点点
    if ($file == &#39;.&#39; || $file == &#39;..&#39;) {
      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/&#39;+obj[k]+&#39;" 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>

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!