移动端瀑布流css实现

在CSS中，可以通过多列布局实现移动端瀑布流。具体实现方法如下：

1. 设置父元素为多列布局

.container {
  column-count: 2; /* 设置为2列 */
  column-gap: 10px; /* 设置列与列之间的间距 */
}

2. 设置子元素的宽度和间距

.item {
  width: 100%; /* 子元素宽度为100% */
  margin-bottom: 10px; /* 子元素之间的间距 */
}

3. 设置子元素的显示方式

img {
  display: block; /* 图片以块级元素显示 */
  width: 100%; /* 图片宽度为100% */
}

完整的CSS代码如下：

.container {
  column-count: 2;
  column-gap: 10px;
}

.item {
  width: 100%;
  margin-bottom: 10px;
}

img {
  display: block;
  width: 100%;
}

需要注意的是，多列布局在不同浏览器中的兼容性可能会有所差异，需要进行兼容性测试和处理。同时，在移动端瀑布流布局中，图片的大小和比例也需要进行处理，以适配不同的屏幕大小和分辨率。