移动端瀑布流css实现 html 左右渲染高度不一样

要实现移动端的瀑布流布局，可以使用CSS3的多列布局。具体实现步骤如下：

1. 首先要确定每一列的宽度，可以使用百分比或者固定像素值。例如，假设要分成三列，每列宽度为30%。

2. 然后，使用CSS3的多列布局，将内容分为多列。设置列数为3，以及每列的宽度。

   .container {
     -webkit-column-count: 3;
     -moz-column-count: 3;
     column-count: 3;
     -webkit-column-width: 30%;
     -moz-column-width: 30%;
     column-width: 30%;
   }

3. 最后，使用CSS3的伸缩盒模型，让每个内容块自适应高度，并且在多列布局中保持等宽。

   .item {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     width: 100%;
     margin-bottom: 20px;
   }
   .item img {
     width: 100%;
     height: auto;
     margin-bottom: 10px;
   }
   .item h3 {
     font-size: 16px;
     font-weight: bold;
     margin-bottom: 5px;
   }
   .item p {
     font-size: 14px;
     color: #999;
     margin-bottom: 5px;
   }

注意事项：

1. 确保每个内容块的高度不一样，以达到瀑布流的效果。

2. 如果图片高度不一致，可以设置图片宽度为100%，高度自适应。

3. 如果每列的宽度不一样，需要调整列的数量和宽度，以达到最佳的布局效果。