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

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

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

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

Answer 2

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 3

辛苦楼主把js也公布出来

Answer 4

css有一个order属性

Answer 5

给你提供一个思路：

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

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