uni-app 【避坑】使用css 属性column-count（实现瀑布流）不支持分页

在 uni-app 中使用 column-count 属性来实现瀑布流布局确实可以带来一些视觉效果上的便利，但需要注意的是，该属性在分页（如长列表分页加载）场景下的支持并不理想。这是因为 column-count 本质上是为多栏布局设计的，而分页加载通常要求动态添加内容并保持滚动条的连续性。

为了避免在 uni-app 中使用 column-count 时遇到分页不支持的问题，我们可以考虑使用其他方法来实现瀑布流布局，比如使用 CSS Grid 或者 JavaScript 动态计算布局。以下是一个使用 JavaScript 和 CSS Flexbox 结合实现简单瀑布流布局的代码示例，该示例支持动态添加内容并模拟分页加载：

HTML/Vue 模板部分

<template>
  <view class="waterfall-container">
    <view v-for="(item, index) in items" :key="index" class="waterfall-item">
      <image :src="item.src" class="item-image"></image>
      <text class="item-text">{{ item.text }}</text>
    </view>
    <button @click="loadMore">Load More</button>
  </view>
</template>

CSS 部分

.waterfall-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.waterfall-item {
  flex: 1 0 calc(33.333% - 10px); /* Adjust the percentage for different column counts */
  margin: 5px;
  box-sizing: border-box;
}

.item-image {
  width: 100%;
  height: auto;
}

.item-text {
  text-align: center;
}

JavaScript/Vue 脚本部分

export default {
  data() {
    return {
      items: [], // Initial items array
      page: 1, // Pagination control
    };
  },
  methods: {
    loadMore() {
      const newItems = Array.from({ length: 10 }, (_, i) => ({
        src: `https://via.placeholder.com/150?text=Item+${this.items.length + i + 1}`,
        text: `Item ${this.items.length + i + 1}`,
      }));
      this.items = [...this.items, ...newItems];
      this.page += 1;
    },
  },
  mounted() {
    this.loadMore(); // Initial load
  },
};

上述代码示例使用 Flexbox 布局来模拟瀑布流效果，并通过 JavaScript 动态添加内容来模拟分页加载。这种方法比使用 column-count 更加灵活，可以更好地处理分页和动态内容添加的需求。同时，Flexbox 布局在 uni-app 中的兼容性也更好，更适合用于生产环境。