瀑布流效果，就是每张大小不同的图片不留白的铺满整个网页，首先要进行页面的设置，设置几个固定的图片，让他们排成一排：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../瀑布/css/pubu.css">
</head>
<body>
<div class="warpper">
<div class="box">
<div class="pics">
<img src="../瀑布/images/1.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="../瀑布/images/1.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="../瀑布/images/10.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="../瀑布/images/11.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="../瀑布/images/21.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="../瀑布/images/31.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="../瀑布/images/41.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="../瀑布/images/38.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="../瀑布/images/39.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="../瀑布/images/41.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="../瀑布/images/42.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="../瀑布/images/43.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="../瀑布/images/44.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="../瀑布/images/45.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="../瀑布/images/46.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="../瀑布/images/33.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="../瀑布/images/35.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="../瀑布/images/37.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="../瀑布/images/51.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="../瀑布/images/52.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pics">
<img src="../瀑布/images/53.jpg" alt="">
</div>
</div>
</div>
</body>
<script src="../瀑布/js/pubu.js"></script>
</html>
完成后，首先要进行判断，因为大小不一的图片排成排的话，中间会有很多留白的空隙，所以要在每行进行判断，取每行中的高度最小的图片,获取之后，在最小的图片之后，将下一行要排列的图片绝对定位在 上一行最小高度的图片之下，然后每次定位之后，在附加一个高度，让图片每次附加完后都会调换位置
var warpper = document.querySelector('.warpper');
var html_w = document.documentElement.clientWidth || document.body.clientWidth;
var boxs = document.querySelectorAll('.box');
//获取图片外包的盒子的总数
var box_w = boxs[0].offsetWidth;
//获取单个box的宽度
var cols = Math.floor(html_w / box_w)
//获取每行在当前宽度下可装的图片数
warpper.style.width = box_w * cols + 'px'
//最大的盒子根据每个小盒子的宽度和数量来进行宽度赋予
var arr = [];
for (var i = 0; i < boxs.length; i++) {
if (i < cols) {
//当i小于当前该行的个数时
arr.push(boxs[i].offsetHeight);
//数组arr将这些数字装进
} else {
var minH = Math.min.apply(Math, arr)
//取数组中高度最小的值
var ind = arr.indexOf(minH);
//获取当前最小值对应的下标
boxs[i].style.cssText = `position:absolute;top:${minH}px;left:${box_w*ind}px`
//为最小值之后的值设置一个绝对定位，使该元素沿着最小值的高度往下排列
arr[ind] += boxs[i].offsetHeight
//每次循环之后，当前的ind加上一个高度的值
}
}
最后，传入数据，每次进行传值调用排列即可，完整代码:
window.addEventListener('load', addEvent);
function addEvent() {
var data = {
'dataimg': [{
'src': '22.jpg'
},
{
'src': '23.jpg'
},
{
'src': '24.jpg'
},
{
'src': '25.jpg'
},
{
'src': '26.jpg'
},
{
'src': '27.jpg'
},
{
'src': '28.jpg'
},
{
'src': '29.jpg'
},
{
'src': '30.jpg'
},
{
'src': '31.jpg'
},
{
'src': '32.jpg'
},
{
'src': '33.jpg'
},
{
'src': '34.jpg'
},
{
'src': '35.jpg'
},
{
'src': '36.jpg'
},
{
'src': '37.jpg'
},
{
'src': '38.jpg'
},
{
'src': '39.jpg'
},
{
'src': '40.jpg'
},
{
'src': '41.jpg'
},
{
'src': '42.jpg'
},
{
'src': '43.jpg'
},
{
'src': '44.jpg'
},
{
'src': '45.jpg'
},
{
'src': '46.jpg'
},
{
'src': '47.jpg'
},
{
'src': '48.jpg'
},
{
'src': '49.jpg'
},
{
'src': '50.jpg'
},
{
'src': '51.jpg'
},
{
'src': '52.jpg'
},
{
'src': '53.jpg'
},
{
'src': '54.jpg'
},
{
'src': '55.jpg'
},
{
'src': '56.jpg'
},
{
'src': '57.jpg'
},
{
'src': '58.jpg'
},
{
'src': '59.jpg'
},
{
'src': '60.jpg'
},
{
'src': '61.jpg'
},
{
'src': '62.jpg'
},
{
'src': '63.jpg'
},
{
'src': '64.jpg'
},
{
'src': '65.jpg'
},
{
'src': '66.jpg'
},
{
'src': '67.jpg'
},
{
'src': '68.jpg'
},
{
'src': '69.jpg'
},
{
'src': '70.jpg'
},
{
'src': '71.jpg'
},
{
'src': '72.jpg'
},
{
'src': '73.jpg'
},
{
'src': '74.jpg'
},
{
'src': '75.jpg'
},
{
'src': '76.jpg'
},
{
'src': '77.jpg'
},
{
'src': '78.jpg'
},
{
'src': '79.jpg'
},
{
'src': '80.jpg'
},
{
'src': '81.jpg'
},
{
'src': '82.jpg'
},
{
'src': '83.jpg'
},
{
'src': '84.jpg'
},
]
}
instAll()
var warpper = document.querySelector('.warpper');
window.onscroll = function () {
if (isOk()) {
//滚动条判断事件
for (var i in data.dataimg) {
//模拟请求，获得数据
warpper.innerHTML += `<div class="box">
<div class="pics">
<img src="../瀑布/images/${data.dataimg[i].src}" alt="">
</div>
</div>`
}
instAll()
//调用排列
}
}
function instAll() {
var warpper = document.querySelector('.warpper');
var html_w = document.documentElement.clientWidth || document.body.clientWidth;
var boxs = document.querySelectorAll('.box');
//获取图片外包的盒子的总数
var box_w = boxs[0].offsetWidth;
//获取单个box的宽度
var cols = Math.floor(html_w / box_w)
//获取每行在当前宽度下可装的图片数
warpper.style.width = box_w * cols + 'px'
//最大的盒子根据每个小盒子的宽度和数量来进行宽度赋予
var arr = [];
for (var i = 0; i < boxs.length; i++) {
if (i < cols) {
//当i小于当前该行的个数时
arr.push(boxs[i].offsetHeight);
//数组arr将这些数字装进
} else {
var minH = Math.min.apply(Math, arr)
//取数组中高度最小的值
var ind = arr.indexOf(minH);
//获取当前最小值对应的下标
boxs[i].style.cssText = `position:absolute;top:${minH}px;left:${box_w*ind}px`
//为最小值之后的值设置一个绝对定位，使该元素沿着最小值的高度往下排列
arr[ind] += boxs[i].offsetHeight
//每次循环之后，当前的ind加上一个高度的值
}
}
}
function isOk() {
var boxs = document.querySelectorAll('.box');
var screen_h = document.documentElement.clientHeight || document.body.clientHeight;
//获取当前可视窗口的高
var top = screen_h + document.documentElement.scrollTop || document.body.scrollTop;
//下拉框的高+可视窗口的高的和即为总高度
var last_img = boxs[boxs.length - 1].offsetTop + boxs[boxs.length - 1].clientHeight/2
//最后一张图片底部离最上部的高度
return top > last_img ? true : false
//判断，最后一张图片的高度超过top时，停止
}
}
