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

第一种方法：采用纯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;
}

注意点：

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