瀑布流即参差不齐的多栏布局，可向下滚动，且随着向下滑动不断加载新的内容

image.png

以下是一些实现方式，只提供用于两栏布局瀑布流的简单思路，多栏瀑布流按照思路也可很快实现，自己去想，懒得写了

js实现

利用js计算和填充数据

直接上代码

<view class="content">
  <view class="content-left">
    <view class="item" v-for="item in listLeft" :key="item.index">{{ item.content}}</view>
  </view>
  <view class="content-right">
    <view class="item" v-for="item in listRight" :key="item.index">{{ item.content }}</view>
  </view>
  <view class="noShow">
    <view ref="list" class="item" v-for="item in list" :key="item.index">{{ item.content }}</view>
  </view>
</view>

.content {
  padding: 10rpx;
  display: flex;
  justify-content: space-between;
}
.content-left {
  display: flex;
  width: calc(50% - 10rpx);
  flex-direction: column;
}
.content-right {
  display: flex;
  width: calc(50% - 10rpx);
  flex-direction: column;
}
.item {
  padding: 10rpx;
  margin-bottom: 10rpx;
  border: 1rpx solid #ccc;
}
.noShow {
  width: calc(50% - 10rpx);
  position: absolute;
  left: 10000px;
  bottom: 10000px;
}

this.$nextTick(() => {
  let elLeftHeight = 0;
  let elRightHeight = 0;
  this.list.forEach((item,index) => {
    if (elLeftHeight > elRightHeight) {
      this.listRight.push(item);
      elRightHeight += this.$refs.list[index].$el.clientHeight;
    } else {
      this.listLeft.push(item);
      elLeftHeight += this.$refs.list[index].$el.clientHeight;
    }
  });
});

过程及原理详细解析

css

1. 使用flex布局设置一个两栏布局（根据实际开发情况可设置多栏布局），每一栏纵向排列
2. 单独设置一个绝对位置的选择器，使其虽然渲染了，但页面上不展示

html

1. 利用flex布局（也可其他方式，无所谓）形成一个基本的两栏布局
2. 为渲染到页面但因定位不会展示在页面的模块设置ref（也可在js中使用document直接获取，看你喜好）

js

1. 分别定义两个空数组用来存储两栏要展示的数据，再将所有数据存放在另一个单独的数组中，渲染到未展示在页面上的绝对定位的模块（为了严谨，需将该模块宽度与两栏布局的每一栏宽度相同），依次可计算每条数据的高度。
2. 按照算法思路，设置左右栏高度都为0，遍历数据，对左右栏高度做判断，将数据写入到较低高度的一栏中（相同高度写入左边），写入后将该数据的展示高度添加到该栏中

较优解：grid布局实现

这种方法不需要对数据进行遍历传入渲染，浏览器自动对内容堆叠排放

首先使用grid布局实现两栏（或多栏）布局

vue+uniapp的实现

.content {
  padding: 10rpx;
  display:grid;
  grid-auto-rows: 10rpx;
  column-gap: 10rpx;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
.content-item {
  border: 1rpx solid #000;
  padding: 10rpx;
}

<view class="content">
  <view class="content-item" ref="content" v-for="item in list" :key="item.index">{{ item.content }}</view>
</view>

this.$nextTick(()=>{
  this.list.forEach((item, index) => {
    this.$refs.content[index].$el.style.gridRowEnd = `span ${Math.ceil(this.$refs.content[index].$el.clientHeight / 5) + 1}`
    console.log(this.$refs.content[index].$el.style.gridRowEnd);
  })
})

image.png

过程及原理详细解析

css：

1. 使用css的grid布局设定基本两栏布局（根据实际开发情况可设置多栏布局）
2. 使用align-items: start设定纵向的排列方式为从上到下依次排列
3. 使用grid-auto-rows: 10rpx属性设置网格每行高度为10rpx

js：

1. 使用ref获取每个内容模块的高度（我用的vue所以使用的是ref，js也可使用document来获取）
2. 使用 clientHeight / 5 ，根据每个模块的高度去除以css中设置的每个网格高度（示例代码用的uniapp的单位rpx，clientHeight获取的是px，10rpx==5px），得到这个模块纵向占据网格的数量，
3. 使用js向其添加行内样式 grid-row-end: span [Number]，该属性设置该模块纵向占据的网格数量，浏览器渲染时会将其自动向下堆叠