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

來源：懂視網(wǎng) 責編：小采時間：2020-11-27 22:51:39

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

原生ajax瀑布流demo分享(必看篇):最近聽朋友們說起瀑布流挺多的，自己就去研究下了，一個簡單的原生demo，分享給大家... 簡單分為三個文檔，有詳細的注釋：img；ajax.php；demo.php 其中img文件夾中放入圖片 1.jpg；2.jpg;3.jpg.... ajax.php頁面 <?php //

推薦度：

點擊下載本文 文檔為doc格式

導讀原生ajax瀑布流demo分享(必看篇):最近聽朋友們說起瀑布流挺多的，自己就去研究下了，一個簡單的原生demo，分享給大家... 簡單分為三個文檔，有詳細的注釋：img；ajax.php；demo.php 其中img文件夾中放入圖片 1.jpg；2.jpg;3.jpg.... ajax.php頁面 <?php //

最近聽朋友們說起瀑布流挺多的，自己就去研究下了，一個簡單的原生demo，分享給大家...

簡單分為三個文檔，有詳細的注釋：img；ajax.php；demo.php

其中img文件夾中放入圖片 1.jpg；2.jpg;3.jpg....

ajax.php頁面

<?php
　　//模擬從數(shù)據(jù)庫讀取數(shù)據(jù)
 $arr = array();
 $op = opendir('./img'); //打開目錄

 //循環(huán)讀取目錄
 while (($file = readdir($op)) !== false) {
 //過濾點和點點
 if ($file == '.' || $file == '..') {
 continue;
 }
 $arr[] = $file;
 }
 closedir($op); //關(guān)閉目錄
 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');

 //拿數(shù)據(jù)
 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;
 //處理結(jié)果
 var obj = JSON.parse(res);
 for (var k in obj) {
 // obj[k];
 //創(chuàng)建節(jié)點
 var li = document.createElement('li');
 li.innerHTML = '<img src="./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);
 //用一次性定時器解決連續(xù)加載的問題
 timer = setTimeout(function(){
 getData();
 }, 200)
 }
 }
</script>
</html>

以上這篇原生ajax瀑布流demo分享(必看篇)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

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

推薦度：

點擊下載本文 文檔為doc格式

標簽：分享 demo ajax

熱門焦點

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

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

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

最新推薦

猜你喜歡

熱門推薦