實現(xiàn)方式

1.flex配合js

原理

列表提前加載一次云茸，計算高度雨女，然后分別加入左右兩個列表舶替，最后渲染兩個列表
先加載

export default defineComponent({
  setup() {
    const loadRef = ref(null)
    const state = reactive({
      loading: false,
      finished: false,
      params: {
        pageSize: 10,
        pageNo: 0
      },
      dataList: [],
      left: {
        list: [],
        height: 0
      },
      right: {
        list: [],
        height: 0
      },
      total: 0
    })

    const onLoad = async () => {
      try {
        state.loading = true
        const {
          data: { data, total}
        } = await FetchDataList(state.params)
        // 用于提前加載
        state.dataList = data
        state.total = total

        state.params.pageNo++

        nextTick(() => {
          // 獲取提前加載的dom
          const arr = loadRef.value.querySelectorAll('.item')

          datas.forEach((e, i) => {
            // 實際展示的列表豆赏，根據(jù)高度判斷push到對應(yīng)數(shù)組
            const listName =
              state.left.height <= state.right.height ? 'left' : 'right'
            state[listName].list.push(e)
            state[listName].height += arr[i].offsetHeight
          })
        })
      } finally {
        state.loading = false
      }
    }

    return {
      lecturer,
      onLoad,
      ...toRefs(state)
    }
  },
  render() {
    return (
      <List
        vModel={this.loading}
        finished={this.finished}
        onLoad={this.onLoad}
        immediate-check={true}
      >
        <!-- 提前渲染的內(nèi)容 -->
        <div
          ref="loadRef"
          style="opacity: 0;position: fixed; left: -999px;top: -999px"
        >
          {this.dataList.map(e => (
            <Item data={e} />
          ))}
        </div>
        <!-- 實際展示的內(nèi)容 -->
        <div class="container">
          <div>
            {this.left.list.map(e => (
              <Item data={e} />
            ))}
          </div>
          <div>
            {this.right.list.map(e => (
              <Item data={e} />
            ))}
          </div>
        </div>
      </List>
    )
  }
})

// style
.container {
  display: flex;
  padding: 15px 15px 0;
  justify-content: space-between;
  & > div {
    width: 168px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    counter-reset: items;
    min-height: 100vh;
  }
}

優(yōu)點

• 可以應(yīng)對內(nèi)容高度未知的情況
• 可以分頁

缺點

• 需要計算束凑，性能有損耗

2.flex

.container{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 800px;
}

優(yōu)點

• 無需js配合

缺點

• 需要提前知道內(nèi)容高度晒旅，并設(shè)置容器高度
• 不支持分頁

3.column-count

.container{
  column-count: 2;
  .item {
    break-inside: avoid;
  }
}

優(yōu)點

• 無需js配合
• 簡單，不需要知道內(nèi)容高度汪诉，不需要設(shè)置容器高度

缺點

• 不支持分頁（分頁時新加載的內(nèi)容會展示在第二列的最上面）