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

瀑布流布局（两列）"/>

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;}