Maison >développement back-end >tutoriel php >Partage d'exemples de démonstration de flux de cascade Ajax natif

Partage d'exemples de démonstration de flux de cascade Ajax natif

小云云original: 2017-12-26 11:13:491537parcourir

Cet article vous propose principalement un partage de démonstration de flux de cascade natif ajax (un article à lire absolument). L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

est simplement divisé en trois documents, avec des commentaires détaillés : img ; ajax.php ;

Mettez l'image 1.jpg 3 dans le dossier img . jpg....

Page 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);

Page 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>

Recommandations associées :

Implémentation JS d'un exemple d'analyse de disposition de flux en cascade

Utilisation de JavaScript pour créer un effet de flux en cascade

Recommander 5 jolis jquery Code effet cascade

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemple de numéro de carte de crédit de vérification PHPArticle suivant：Exemple de numéro de carte de crédit de vérification PHP

Articles Liés

Voir plus