思路：
1、判断页面的宽度，根据页面宽度插入一定数量的div作为容器
2、根据图片等数据存放的数组生成构成瀑布流的元素
3、判断每一个容器的高度，在高度最小的一个div中插入新生成的元素
注意：一定要给内部的图片加上onload事件，否则会因为图片加载未完成影响高度的判断
css部分（样式随便写写就好）
1 .all{
2 margin: 0 auto;
3 display: flex;
4 justify-content: space-around;
5 }
7 .all>div{
8 width: 260px;
9 display: table;
10 }
12 .active{
13 margin-top: 20px;
14 width: 220px;
15 padding: 10px;
16 border: #555555 1px solid;
17 position: relative;
18 background: white;
19 }
21 .active h3{
22 font-size: 16px;
23 }
25 .active p{
26 font-size: 14px;
27 color: #666666;
28 margin-bottom: 20px;
29 }
31 .active p span{
32 color: #AAAAAA;
33 }
35 .active p a{
36 font-weight: bold;
37 color: #222222;
38 text-decoration: none;
39 }
41 .active div{
42 font-size: 14px;
43 width: 40%;
44 display: flex;
45 padding: 0 10px;
46 justify-content: space-between;
47 color: #AAAA00;
48 position: absolute;
49 bottom: 10px;
50 right:0 ;
51 }
53 .active img{
54 width: 100%;
55 }
56
结构部分
js部分（主要内容）
//数据部分var data=[{
img:"图片的地址",
name:"李世民",
liyou:"理由"
}......];
//构造函数部分
function Fid(){
this.all=document.querySelector(".all");
this.div=document.querySelectorAll(".all>div");
this.shell();
}
//根据屏幕的宽度判断当前页面瀑布流的列数
Fid.prototype.shell=function(){
var w=document.documentElement.clientWidth;
this.all.style.width=Math.floor(w/this.div[0].offsetWidth)*this.div[0].offsetWidth+"px"; //根据能放入的列数设置页面的宽度，方便进行居中
for(var i=1;i<Math.floor(w/this.div[0].offsetWidth);i++){
var div=document.createElement("div"); //生成几个大的div用来盛放每一列的内容
this.all.appendChild(div);
}
this.load();
}
Fid.prototype.load=function(){
this.index=1; //设置一个索引，用来进行分页显示
this.generate(); //初始调用，用于刚刚加载显示第一页
var that=this;
this.kg=true; //设置一个开关，控制滚动事件不会触发多次致使一下加载多页内容
window.onscroll=function(){
var keshih=document.documentElement.clientHeight;
var scrollt=document.documentElement.scrollTop;
var scrollh=document.documentElement.scrollHeight;
if(keshih+scrollt>scrollh-500&&that.kg){ //判断开关是否为“开”的状态，同时判断滚动条是否接近底部
that.index++; //索引变化，加载后面的内容
that.kg=false; //调整开关状态
that.generate();
}
}
}
Fid.prototype.generate=function(){
this.div=document.querySelectorAll(".all>div");
for(var i=0;i<this.div.length;i++)
this.div[i].num=i; //给每个容器加一个不可见属性，用于后面方便使用
for(var j=(this.index-1)*20;j<this.index*20;j++){ //分页操作，一次加载20个内容
if(j>=data.length)break; //进行判断，最大加载数量不超过数据data的长度
let dd=document.createElement("div");
dd.className="active"; //生成div并给每个div加个样式，内部填充内容
dd.innerHTML=`<img src="${data[j].img}" alt="##"> <h3>${data[j].name}</h3> <p> <span>理由：</span>${data[j].liyou} <a href="##">查看详情</a> </p> <div> <i class="icon-heart">赞</i> <i class="icon-bubble2">评论</i> </div>`;
var oimg=dd.querySelector("img");
oimg.onload=()=>{ //最关键的部分，给图片加上加载事件
var c=0;
var min=this.div[0].offsetHeight;
for(x=0;x<this.div.length;x++){ //图片加载完成判断容器高度，将最短的容器标记出来
if(min>this.div[x].offsetHeight){
c=this.div[x].num;
}
this.div[c].appendChild(dd); //插入元素，瀑布流完成
}
}
}
setTimeout(()=>{ //插入完成后50毫秒将开关状态恢复初始
this.kg=true;
},50)
}
//如果未使用图片的加载事件，也可以使用延时器来给图片一个加载的时间，不过不同计算机加载时间不尽相同，而且又是延迟过高会导致图片还是加载不完成，不建议使用延时器 //延时器方法还有一个缺点就是每次加载内容都会延时指定时间
// Fid.prototype.panduan=function(dd){
// setTimeout(()=>{
// var c=0;
// var min=this.div[0].offsetHeight;
// for(x=0;x<this.div.length;x++){
// if(min>this.div[x].offsetHeight){
// c=this.div[x].num;
// }
// }
// this.div[c].appendChild(dd);
// this.kg=true;
// },300);
// }
new Fid();
运行结果：
