参考：

1、column-count 把div中的文本分为多少列

2、column-width 规定列宽

3、column-gap 规定列间隙

4、break-inside: avoid; 避免元素内部断行并产生新列

<!-- 瀑布流布局 -->

<!-- 第一种方案(存在兼容问题，有些手机第二列第一个内容和左边第一个内容不对齐----原因是使用margin-bottom了 不适用这个元素仍然可以使用) -->

<div class="box">

<div class="item">111</div>

<div class="item">222</div>

<div class="item"></div>

<div class="item"></div>

</div>

<style>

/*大层*/

.box {

margin: 0 auto;

width: 100%;

column-count: 2;

column-width: 334px;

column-gap: 20px;

}

.item{

margin-bottom: 10px;

break-inside: avoid; /* 防止多列布局，分页媒体和多区域上下文中的意外中断 */

}

</style>

<!-- 第二种方案 flex布局（建议使用这个，亲测） -->

<div class="box">

<div class="col">

<div class="item"></div>

<div class="item"></div>

<div class="item"></div>

<div class="item"></div>

</div>

<div class="col">

<div class="item"></div>

<div class="item"></div>

<div class="item"></div>

<div class="item"></div>

</div>

</div>

<style>

.box{

display: flex;

flex-direction: row;

margin: 0 auto;

width: 100%;

}

.col{

margin-right: 20px;

flex-direction: column;

width: 334px;

}

.item {

background:#fff;

margin-bottom:20px;

}

</style>