This time I will bring you ajax waterfall flow to realize demo sharing (with code). What are the precautions for ajax waterfall flow to realize demo sharing. The following is a practical case, let's take a look.
Recently I heard from friends that there are a lot of waterfalls, so I went to study it myself. I made a simple native demo to share with everyone...
Simple It is divided into three documents with detailed comments: img; ajax.php; demo.php
#img folder Input picture 1.jpg; 2.jpg; 3.jpg....
ajax.php page
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <?php
$arr = array ();
$op = opendir('./img');
while (( $file = readdir( $op )) !== false) {
if ( $file == '.' || $file == '..') {
continue ;
}
$arr [] = $file ;
}
closedir ( $op );
echo json_encode( $arr );
|
Copy after login
demo.html page
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | <!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) {
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;
document.title = zGao + '_' + lGao + '_' + gGao;
if (zGao - lGao - gGao < 500) {
clearTimeout(timer);
timer = setTimeout( function (){
getData();
}, 200)
}
}
</script>
</html>
|
Copy after login
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
How to configure Google Chrome to support AJAX requests of the file protocol
How to use php to receive ajax submissions Data to the background
The above is the detailed content of Ajax waterfall flow realizes demo sharing (with code). For more information, please follow other related articles on the PHP Chinese website!