瀑布流效果

方法一：column实现

column-count: 定义屏幕分为多少列 column-gap: 定义列与列之间的距离

 #box{
        margin: 40px;
        column-count: 5;
        column-gap: 20px;
    }
#box > li > img{
    width: 100%;
    height: 100%;
}

缺点：

兼容性差排列规律永远都是先上下在左右，无法控制

flex

#box{
    display: flex;
    flex-flow: column wrap;
    height: 2000px;
}
#box > li{
    margin: 10px;
    width: calc(100% / 4 - 20px);
}
#box > li > img{
    width: 100%;
    height: 100%;
}

缺点：

高度是固定的