瀑布流效果，用女神图片用三种方法实现，比在浏览器看过瘾，哈哈哈

第一种方法：采用纯CSS的"多列"属性

实现瀑布流用到的一些多列属性：
1. column-count:指定元素的列数
2. column-gap:指定列之间的差距
3. column-width:指定列的宽度
效果图：

上代码：

imageUrl:string[]=["https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589350346618&di=de03b3da00a0f34c39686d5807358867&imgtype=0&src=http%3A%2F%2Fspider.nosdn.127.net%2Ffa1e529588bb26cc1138af1cccd7e138.jpeg","https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589350346614&di=4cbbfb5f8866e8db964f910b052549df&imgtype=0&src=http%3A%2F%2Fdingyue.nosdn.127.net%2FdbiHYV2Ii%3Dit4aHh5w%3DNSerym2eozFdZFWYpEDmhETTft1543830889499compressflag.jpg","https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589350346613&di=e0f058157679cd453bb9f55ec0d31ae2&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201605%2F04%2F20160504123249_3KQFV.jpeg","https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=98853028,1799253278&fm=26&gp=0.jpg","https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589350814762&di=fd1b01941ee66948102a9a2d453bac97&imgtype=0&src=http%3A%2F%2Fc1.haibao.cn%2Fimg%2F600_0_100_1%2FliTPb8Fw0hHUk%2Fpiccommon%2F1220%2F12209%2FliTPb8Fw0hHUk.jpg","https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=826485233,505117694&fm=26&gp=0.jpg","http://img5.imgtn.bdimg.com/it/u=2473598420,2292311239&fm=26&gp=0.jpg","http://b-ssl.duitang.com/uploads/item/201705/03/20170503082132_shZFk.jpeg","http://b-ssl.duitang.com/uploads/item/201708/08/20170808200725_S5dhK.jpeg","http://img3.duitang.com/uploads/item/201605/29/20160529071411_CwjB5.thumb.700_0.jpeg","http://img3.duitang.com/uploads/item/201606/18/20160618080624_fxJRk.jpeg","http://b-ssl.duitang.com/uploads/item/201806/08/20180608120338_ulawx.thumb.700_0.jpg","http://b-ssl.duitang.com/uploads/item/201806/22/20180622123913_icbup.jpg"];<div class="body" id="body"><div class="container" id="container"><div *ngFor="let img of imageUrl"><img src={{img}}></div></div>
</div>*{margin:0px;padding:0px;
}
.body{background-color: aliceblue;
}
.container{position: relative;width:921px;background-color:  bisque;margin:0px auto;column-count: 4;column-width:225px;column-gap: 3.5px;
}
.container div{padding:10px;
}
img{border-radius: 10%;width:205px;position: relative;
}

注意点：

采用column实现瀑布流，它的图片排布顺序是“由上往下”排布的，即imageUrl数组中的第二个图片的src显示在效果图中第一列第二张图片的位置。
这里不能设置具体的height,如果设置了具体的height，如果height值不足以装下所有图片，那么就会出现"横向"滚动条，而不是纵向滚动条，就算设置overflow-y:auto,也是出现横向滚动条；如果height值过大，图片不多，那又有很多空余地方。因此不用设置height,让它根据图片的多少自动响应。
column一开始是用于“文本”按多列显示，实现瀑布流是意外的发现。

第二种方法：采用纯CSS的“flex”布局

知识点：

弹性盒子由弹性容器和弹性子元素组成。
弹性容器通过设置display属性的值为flex或inline-flex即声明为弹性容器。

flex经常使用的一些属性：

flex-direction:用于弹性子元素的漂浮方向
justify-content:内容对齐属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线对齐。
align-content:设置或检索弹性盒子元素在纵轴方向上的对齐方式。
flex-wrap:用于指定弹性盒子的子元素换行方式。
order:用整数值来定义排列顺序，数值小的排在前面，可以为负值。

效果图：

上代码：

<div class="body" id="body"><div class="container"><div><div *ngFor="let url of imageUrl1" class="item"><img src={{url}}></div></div><div><div *ngFor="let url of imageUrl2" class="item"><img src={{url}}></div></div><div><div *ngFor="let url of imageUrl1" class="item"><img src={{url}}></div></div><div><div *ngFor="let url of imageUrl2" class="item"><img src={{url}}></div></div></div>
</div>.container{width:1000px;background-color: bisque;margin:0px auto;display: flex;flex-direction: row;
}
.container div{width:250px;
}
.container div .item{padding-top:12.5px;padding-left:12.5px;
}
img{border-radius: 10%;width:225px;
}

实现瀑布流的思路： 就是将container容器分成三个横向排布的容器，然后在在三个容器中加入子元素，让它们紧挨着纵向排布即可。flex-direction:row;使得三个子容器横向排列。

注意： 这两种纯CSS在静态网页上实现瀑布流是非常方便的，但要与后端处理的网页就需要用js实现的瀑布流更为合适。下面将用js实现瀑布流。

第三种方法：js实现瀑布流

思路： 在一个大容器中加入图片，由于每个装有图片的小容器是根据每列最小高度决定的，所以它的位置可能是在大容器的任意位置，因此图片容器必须是 “绝对” 定位。那么是如何决定每个容器图片的位置呢？决定一个图片位置需由left和top来确定，首先来说一下top，我们需用一个变量来记录每一列加载图片后的高度，然后用一个函数来找出最小的高度的一列，新生成的图片容器即移动到这列下面，当移动完成后务必将这列的目前高度更新，即加上新增的容器高度即可；left就简单了，比如在第二列，就往左移动一个图片容器的宽度，第三列就移动两个图片容器宽度。
效果图：

上代码：

<--html-->
<div class="body" id="body"><div class="container" id="container"></div>
</div><--css-->
.container{position: absolute;width:1000px;margin-left:267.5px;
}<--ts-->
import { SetBodyService } from '../../services/set-body.service';
@Component({selector: 'app-waterfall-flow',templateUrl: './waterfall-flow.component.html',styleUrls: ['./waterfall-flow.component.css']
})
export class WaterfallFlowComponent implements OnInit {imageUrl:string[]=["http://img3.imgtn.bdimg.com/it/u=2720828083,1944181330&fm=214&gp=0.jpg","http://pic1.win4000.com/wallpaper/4/55f7d8120e8d9.jpg","http://a.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=c3eaf688ae1ea8d38a777c00a23a1c78/0dd7912397dda1445d242d81bab7d0a20cf486d0.jpg","http://img1.doubanio.com/view/photo/l/public/p2286361348.jpg","http://img4.imgtn.bdimg.com/it/u=1385458535,2707792223&fm=26&gp=0.jpg","http://img3.doubanio.com/view/photo/l/public/p2245656810.jpg","http://i0.hdslb.com/bfs/archive/d0c4ef29465c1e81c1b7ef3ee153226b69bfb988.jpg","http://img3.doubanio.com/view/photo/l/public/p2238986974.jpg","http://smimg5.mingxing.com.cpgzh.com/upload/pic/smpic/2016/5722/20161129093449_92506.jpg","http://hbimg.b0.upaiyun.com/9defce59b7be7f69714ad38cfa0fdfa1a1cb646112bce-Fi6DY2_fw658","http://img3.imgtn.bdimg.com/it/u=1565781473,2937605964&fm=214&gp=0.jpg","http://img1.imgtn.bdimg.com/it/u=488153396,1617963994&fm=214&gp=0.jpg","http://hbimg.b0.upaiyun.com/224dd07e9b2c907f85d8cf94543afaf3ee369b6c10d09-Z5ekDk_fw658","http://c3.haibao.cn/img/0_0_100_1/1529996952.6817/ef999b1760f8bd7193cab921b8b53950.jpg","http://img5.imgtn.bdimg.com/it/u=1169307261,3984018180&fm=26&gp=0.jpg","http://cdn0.hbimg.cn/store/wm/piccommon/1211/12118/D525B7BBEAB6C0F2DBA98FCF38.jpg","http://img3.imgtn.bdimg.com/it/u=4254713837,1862524406&fm=26&gp=0.jpg","http://n.sinaimg.cn/translate/303/w1080h1623/20180515/ZHp2-fzrwiaz5438989.jpg","http://c1.haibao.cn/img/460_690_100_1/liOzPRH2UgGA/piccommon/1220/12209/liOzPRH2UgGA.jpg"
];columnHeight:number[]=[0,0,0,0];//记录每列的最新高度，确定新图片加载在哪列下面presentHeight:number;//图片被缩放后的高度minIndex:number;setWaterFall(){//设置瀑布流var parentDiv=document.getElementById("container");for(let i=0;i<this.imageUrl.length;i++){var divObj=document.createElement("div");//生成包裹着图片的容器divObj.setAttribute("style","width:250px;background-color:bisque");var newImg=new Image();//newImg.setAttribute("src",this.imageUrl[i]);newImg.src=this.imageUrl[i];alert(newImg.width);newImg.setAttribute("style"," width:225px;margin:12.5px;border-radius: 10%;")this.getPresentHeight(newImg);//须在设置newImg的style属性前更新缩小后的高度divObj.appendChild(newImg);parentDiv.appendChild(divObj);this.rightPosition(divObj);}}getMinColumn(){//找出四列最短的一列let min=this.columnHeight[0];let index=0;for(let i=1;i<4;i++){if(min>this.columnHeight[i]){min=this.columnHeight[i];index=i;}}this.minIndex=index;}updateColumnHeight(){//将图片加在最短列下面后，要更新最短列的高度this.columnHeight[this.minIndex]=this.presentHeight+25+this.columnHeight[this.minIndex];}getPresentHeight(picture:any){//获得图片的缩小后的高度this.presentHeight=picture.height/(picture.width/225);console.log(this.presentHeight);}rightPosition(divObj:any){//将装有图片的div移动到合适位置this.getMinColumn();//要移到合适位置，首先得更新最小列switch(this.minIndex){case 0:{divObj.style.position="absolute";divObj.style.left="0px";//第一列在横向不用移动divObj.style.top=`${this.columnHeight[0]}px`;break;}case 1:{divObj.style.position="absolute";divObj.style.left="250px";//第一列在横向不用移动divObj.style.top=`${this.columnHeight[1]}px`;break;}case 2:{divObj.style.position="absolute";divObj.style.left="500px";//第一列在横向不用移动divObj.style.top=`${this.columnHeight[2]}px`;break;}case 3:{divObj.style.position="absolute";divObj.style.left="750px";//第一列在横向不用移动divObj.style.top=`${this.columnHeight[3]}px`;break;}}this.updateColumnHeight();//设置位置后需更新最小列高度}constructor(private setBodyService:SetBodyService) { }ngOnInit(): void {var body=document.getElementById("body");this.setBodyService.setBody(body);this.setWaterFall();
}
}<--一个自定义服务-->@Injectable({providedIn: 'root'
})
export class SetBodyService {constructor() { }setBody(obj:any){var width=window.screen.width;var height=window.screen.height;obj.setAttribute("style",`height:${height-72}px; width:${width-1}px`);}
}

最后反映我遇到的一个问题： 我在网上找图片时，发现有一些图片是通过newImg.height是无法获取图片的宽度或高度的，得到的高度为0，若为0，请务必删除该图片链接，更换其它图片，否则可能导致不能形成瀑布流效果。
小白一枚，有错请在评论区指教