ネイティブ Ajax ウォーターフォール フローのデモ例の共有

この記事では主に、ネイティブ Ajax ウォーターフォール フローのデモ共有について説明します (必読の記事)。編集者はこれがとても良いものだと思ったので、皆さんの参考として今から共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

詳細なコメントを含む 3 つのドキュメントに分かれています: img; ajax.php; demo.php

画像 1.jpg; 3.jpg を img フォルダーに置きます。 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 ページ

nbsp;html>


  <meta>
  <title>瀑布流</title>
  <style>
    li{
      list-style: none;
      float: left;
      margin:4px;
    }
    img{
      border:4px solid black;
    }
  </style>


  

       

<script> //找对象 var ul = document.getElementById(&#39;ul&#39;); //拿数据 function getData() { var ajax = new XMLHttpRequest(); ajax.open(&#39;get&#39;, &#39;ajax.php&#39;, 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(&#39;li&#39;); li.innerHTML = &#39;<img src="/static/imghwm/default1.png" data-src="./img/&#39;+obj[k]+&#39;" class="lazy" style="max-width:90%" / alt="ネイティブ Ajax ウォーターフォール フローのデモ例の共有" >&#39;; 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 + &#39;_&#39; + lGao + &#39;_&#39; + gGao; if (zGao - lGao - gGao < 500) { clearTimeout(timer); //用一次性定时器解决连续加载的问题 timer = setTimeout(function(){ getData(); }, 200) } } </script>

関連する推奨事項:

滝の流れのレイアウトの JS 分析例

JavaScript を使用して滝の流れの効果を作成する

おすすめの 5 つの見栄えの良い jquery の滝の流れ効果コード

以上がネイティブ Ajax ウォーターフォール フローのデモ例の共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。