前端瀑布流布局能不能左右挨个顺序排序？

Question

需求：瀑布流布局
遇到的问题：布局完发现它的渲染顺序是左左右右...如图所示，可以实现按正常顺序排列的瀑布流吗
我的css

.wrapper {
  column-count: 2; /* 列数 */
  column-gap: 10px; /* 列之间的间隙 */
  margin: 10px;
  padding-bottom: 200rpx;
}

.item {
  display: inline-block;
  width: 100%; /* 每个项目的宽度 */
  margin-bottom: 20rpx; /* 项目之间的间隙 */
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 0 5rpx rgba(0, 0, 0, 0.02);
  box-sizing: border-box;
  overflow: hidden;
  padding-bottom: 15rpx;
}
.item:nth-child(odd) {
  height: 200px;
}

.item:nth-child(even) {
  height: 250px;
}

Answer 1

给你提供一个思路：

用js改变一下数据的顺序，原来是1，2，3，4，5，6，7，8改变成1，3，5，7 / 2，4，6，8

就是分下奇偶数排个顺序。

Answer 2

css有一个order属性

Answer 3

辛苦楼主把js也公布出来

Answer 4

Vue SFC Playground

<script setup>
import { ref, computed } from "vue"

const arr = ref(Array(20).fill(0).map((_, i) => ({ i, h: Math.random() * 200 + 100 }))),
  left = computed(() => arr.value.filter((_, i) => i % 2 === 0)),
  right = computed(() => arr.value.filter((_, i) => i % 2 !== 0))
</script>

<template>
  <div class="container">
    <div class="left">
      <div v-for="i of left" :key="i.i" :style="{ height: `${i.h}px` }">{{ i.i }}</div>
    </div>
    <div class="right">
      <div v-for="i of right" :key="i.i" :style="{ height: `${i.h}px` }">{{ i.i }}</div>
    </div>
  </div>
</template>

<style scoped>
.container {
  display: flex;
}

.container>div {
  flex: 1;
}

.container>div>div {
  display: flex;
  justify-content: center;
  align-items: center;
  border: red 2px solid;
  border-radius: 5px;
  margin: 10px 5px;
}
</style>

Answer 5

以你当前使用CSS实现瀑布流的方式不行。因为使用 columns 的方式实现瀑布流就是一列一列排列计算的。因为这个CSS属性原本是给多列文本排版使用的。给你贴一张文本内容你就理解了 👇

所以如果要左右左右这样排列，只能改变你的瀑布流实现方式。比如说楼上 @42 提到的左右两列的方式。