移动端瀑布流css实现 html 渲染左右

移动端瀑布流可以通过CSS3的多列布局实现，同时可以通过HTML的渲染顺序来实现左右交错的效果。

具体实现方法如下：

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

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

2. 设置子元素的宽度和间距，并设置左右交错的渲染顺序

.item {
  width: 100%; /* 子元素宽度为100% */
  margin-bottom: 10px; /* 子元素之间的间距 */
  -webkit-column-break-inside: avoid; /* 避免元素在列中间断开，实现左右交错效果 */
  page-break-inside: avoid;
  break-inside: avoid;
}

.item:nth-child(odd) {
  -webkit-column-break-after: always; /* 奇数项设置为右侧元素 */
  page-break-after: always;
  break-after: always;
}

完整的CSS代码如下：

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

.item {
  width: 100%;
  margin-bottom: 10px;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

.item:nth-child(odd) {
  -webkit-column-break-after: always;
  page-break-after: always;
  break-after: always;
}

需要注意的是，左右交错的效果需要保证每一列的高度尽量相等，否则可能会导致排版混乱。如果需要动态加载数据，可以使用JavaScript库来实现滚动加载和自适应排列。