CSS实现照片卡片瀑布流布局（两列）

1.问题：

今天遇到了需要实现一个卡片的瀑布流布局的问题，卡片高度是不同的。

最后使用css3中的column属性实现了这个布局，而且非常的简便啊(lz隐约记得上次写瀑布流的时候是用js实现的…naive啊)

实现效果大概如下图～

2.实现方法

// 外层DIV
.PhotoWall {
        /*margin-bottom: 60px;*/
        column-gap: 10px; // 卡片间距
        column-count: 2; // 卡片列数
        /*margin: 10px 10px 40px;*/
    }
           

// 照片卡片
.all {
        break-inside: avoid; // 不设置这个，卡片会被拦腰截断
        margin-bottom: 10px;
        border-style: outset;
        border-color: #DDDDDD;
    }