所谓瀑布流就是让大小尺寸不同的图片像瀑布一样，整个页面都布满图片
而在 Ajax 中，瀑布流能够说是很常见的，利用瀑布流有限加载技术，勾销了分页按钮，鼠标滑动到底部会主动加载图片
先上一下效果图：
html 构造 和 css 款式
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
width: 250px;
position: absolute;
display: block;
transition: 0.8s;
}
</style>
<body>
<!-- 页面一上来先加载一些图片 -->
<img src="图片 1" alt="">
<img src="图片 2" alt="">
<img src="图片 3" alt="">
<img src="图片 4" alt="">
<img src="图片 5" alt="">
<img src="图片 6" alt="">
<img src="图片 7" alt="">
<img src="图片 8" alt="">
<img src="图片 9" alt="">
</body>
</head>Ajax
这个一个重点就是应用 imgH这个数组来存储每一列的图片高度，高度小的先排列，就会造成瀑布流
<script src="./server1/public/js/Ajax.js"></script>
<script>
// 页面加载实现就调用 layout 进行布局
window.onload = layout;
// 窗口扭转也调用函数
window.onresize = function() {layout();
}
function layout() {
// 获取全副的图片
let getImgs = document.querySelectorAll('img');
// 获取可视区的宽度
let windowWidth = document.documentElement.clientWidth;
// 计算一行显示多少张图片
let n = Math.floor(windowWidth / 350);
if (n <= 0) {return}
// 计算页面两侧的空白
let blankWidth = (windowWidth - n * 250) / 2
// imgH 用来记录每一列的图片高度
let imgH = []
for (let i = 0, n1 = getImgs.length; i < n1; i++) {
// 用来计算是是一行中的第几个 img，给数组作索引
let j = i % n;
if (imgH.length === n) {
// 从高度低的开始排
let min = getMin(imgH);
// 左右高低定位，并给一个 20px 的间距
getImgs[i].style.left = blankWidth + min * 270 + 'px'
getImgs[i].style.top = imgH[min] + 20 + 'px'
// 批改该地位的图片的高度
imgH[min] = imgH[min] + getImgs[i].offsetHeight + 20
} else {
// 这个用来排序第一行，把 img 的高度放进数组
imgH[i] = getImgs[i].offsetHeight + 20;
// 左右定位
getImgs[i].style.left = blankWidth + j * 270 + 'px';
getImgs[i].style.top = 20 + 'px';
}
}
}
// 找出高度最小的图片的索引
function getMin(arr) {
let m = 0
for (let i = 0, n = arr.length; i < n; i++) {m = Math.min(arr[m], arr[i]) === arr[m] ? m : i;
}
return m;
}
// j 用来记录 Ajax 申请的次数
let j = 0
// 当滚动条滚动时触发函数
window.onscroll = function() {
// 可视区高度
let windowHeight = document.documentElement.clientHeight;
// 被卷去的高度
let windowScroll = document.documentElement.scrollTop || document.documentElement.scrollTop;
// 图片高度
let imgsHeight = document.documentElement.scrollHeight;
// 判断是否到底部了，是就通过 Ajax 申请发送数据
if (windowHeight + windowScroll >= imgsHeight - 20) {if (j < 4) {
Ajax({
url: 'http://127.0.0.1:3000/getImg',
// 将 j 传给服务器端
data: {num: j},
success(data) {data = JSON.parse(data)
for (let key in data) {
// 创立图像标签
let img = document.createElement('img');
// 绑定标签
img.src = data[key];
document.body.appendChild(img)
};
// 追加新的节点之后从新布局
layout();}
});
j++
} else {layout()
}
};
};
</script>这里的 j 其实是用来管制Ajax 申请的次数的，这里只进行 4 次申请（没有那么多图片），当然如果你去掉判断条件，就能够实现有限加载啦
这里的服务端比较简单，只是响应图片而已
app.get('/getImg', function(req, res) {res.setHeader('Access-Control-Allow-Origin', '*');
// 筹备了 4 个图片库
imgsUrl1 = {},
imgsUrl2 = {},
imgsUrl3 = {},
imgsUrl4 = {}
// 每次申请发送一个图库
if (req.query.num === '0') {res.json(imgsUrl1)
} else if (req.query.num === '1') {res.json(imgsUrl2)
} else if (req.query.num === '2') {res.json(imgsUrl3)
} else {res.json(imgsUrl4)
}
})满腹经纶，只能实现这点货色（呜呜呜呜 ….），若有过错，还望指出，持续冲啊啊啊啊啊啊！