最近听朋友们说起瀑布流挺多的，自己就去研究下了，一个简单的原生demo，分享给大家…
简单分为三个文档，有详细的注释：img；ajax.php；demo.php
其中img文件夹中放入图片 1.jpg；2.jpg;3.jpg….
ajax.php页面
<?php
//模拟从数据库读取数据
$arr = array();
$op = opendir('./img'); //打开目录
//循环读取目录
while (($file = readdir($op)) !== false) {
//过滤点和点点
if ($file == '.' || $file
【原生Ajax瀑布流】是一种常见的网页布局方式，它通过动态加载内容，使得页面中的元素如瀑布般逐个排列，用户在浏览时无需手动翻页，内容会随着滚动条的下拉自动加载。本篇文章将重点讲解如何使用原生Ajax实现一个简单的瀑布流Demo。
我们来看`ajax.php`页面，这是模拟从数据库读取数据的部分。在这个例子中，它通过`opendir()`函数打开`img`文件夹，并使用`readdir()`循环遍历目录中的文件。`readdir()`返回的是目录中的文件名，我们需要过滤掉`.`和`..`这两个特殊目录。将其他文件名存储到数组`$arr`中，然后使用`json_encode()`将数组转换为JSON格式并输出，以便Ajax请求获取。
接下来是`demo.html`页面，这个页面是瀑布流的主体。HTML部分定义了一个无序列表`<ul id="ul">`，初始时没有图片元素。CSS部分设置了列表项`li`的样式，使其浮动并添加边距，图片边框为黑色。
JavaScript部分首先获取了`ul`元素，然后定义了一个`getData()`函数用于发送Ajax请求。`new XMLHttpRequest()`创建了XMLHttpRequest对象，设置请求类型为GET，URL为`ajax.php`，并开启异步模式。发送请求后，定义了`onreadystatechange`回调函数，当状态变为4且状态码为200（表示请求成功）时，解析响应的JSON数据，遍历数组并为每个文件名创建一个新的`<li>`元素，包含对应的图片，将其添加到`ul`元素中。
为了实现滚动加载，我们监听`window.onscroll`事件。在滚动事件中，获取了页面的总高度、可视区域高度和滚动条的滚动高度。当页面底部距离顶部的距离小于500像素时，说明接近底部，此时清空已设置的定时器（防止连续加载），然后设置一个新的定时器，延迟200毫秒后调用`getData()`函数，以加载下一批图片。这种延时加载的策略可以优化用户体验，避免频繁请求服务器。
这个原生Ajax瀑布流Demo提供了一个基础的实现框架，实际应用中可能需要根据具体需求进行扩展，例如添加错误处理、优化图片加载速度、实现动态列宽等。同时，考虑到响应式设计，可以使用媒体查询或Flexbox、Grid布局来适应不同设备的屏幕尺寸。
原生Ajax瀑布流的实现涉及Ajax请求、JSON数据解析、DOM操作以及事件监听等技术，通过这些技术的组合，我们可以构建出一个动态、流畅的瀑布流页面。希望这个分享对大家学习和理解瀑布流布局有所帮助，同时也鼓励大家探索更多关于Ajax和前端布局的高级技巧。
