css3 瀑布流

方式一：column
.my-card-wrapper{
-moz-column-count:2;
-webkit-column-count:2;
column-count:2;
-moz-column-gap:0;
-webkit-column-gap:0;
padding-top: 0.5em;
}
.my-card{
border: 1px solid #cccccc;
padding: 8px;
border-radius: 10px;
-moz-page-break-inside: avoid;
-webkit-column-break-inside: avoid;
break-inside: avoid;
margin: 0 0.5em 0.5em;
}

代码解释：

column-count # 流式布局几列显示
-moz-column-count:2; # 为了适配不同浏览器
-webkit-column-count:2; # 为了适配不同浏览器
-webkit-column-gap:0; # 列之前的间隔，有默认间隔值，为了不影响效果，我改的0，自己做边距
break-inside: avoid; # 防止多列布局，分页媒体和多区域上下文中的意外中断?? 不懂设置上即可

列表的内容跨列，破坏整体的布局。
要解决这问题只要在每个子盒子的div样式上加上
break-inside:avoid;
box-sizing: border-box;
顶部不对齐.
要解决这问题只要在每个子盒子的div样式上修改margin-bottom为padding-bottom即可

方式二：flex
.my-card-wrapper{
width: 100%;
display: flex;
flex-flow: column wrap;
}
.my-card{
width: 50%;
border-radius: 10px;
border: 1px solid #cccccc;
padding: 8px;
box-sizing: border-box;
-moz-page-break-inside: avoid;
-webkit-column-break-inside: avoid;
break-inside: avoid;
}
.my-card:nth-of-type(2n){
order: 2;
}
.my-card:nth-of-type(2n+1){
order: 1;
}