suchen

Heim >Web-Frontend >js-Tutorial >Ajax-Wasserfallfluss realisiert Demo-Sharing (mit Code)

Ajax-Wasserfallfluss realisiert Demo-Sharing (mit Code)

php中世界最好的语言
php中世界最好的语言Original
2018-03-31 16:25:001497Durchsuche

Dieses Mal bringe ich Ihnen eine Demo-Freigabe der Ajax-Wasserfall-Flow-Implementierung (mit Code). Was sind die Vorsichtsmaßnahmen für die Demo-Freigabe der Ajax-Wasserfall-Flow-Implementierung?

Ich habe kürzlich von Freunden gehört, dass es viele Wasserfälle gibt, also habe ich es selbst studiert. Ich teile eine einfache native Demo mit allen...

Einfach Es ist in drei Dokumente mit detaillierten Kommentaren unterteilt: img; demo.php

wobei img platziert ist im Ordner Eingabebild 1.jpg; 2.jpg; 3.jpg....

ajax.php Seite

<?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-Seite

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie hier Weitere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So konfigurieren Sie Google Chrome für die Unterstützung von AJAX-Anfragen des Dateiprotokolls

So verwenden Sie PHP um Ajax-Übermittlungsdaten im Hintergrund zu empfangen

Das obige ist der detaillierte Inhalt vonAjax-Wasserfallfluss realisiert Demo-Sharing (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php ajax html
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Beispielcode zum Entwickeln einer Schaltflächenkomponente in vue_vue.jsNächster Artikel：Beispielcode zum Entwickeln einer Schaltflächenkomponente in vue_vue.js

In Verbindung stehende Artikel

Mehr sehen