css实现瀑布流

最新推荐文章于 2025-04-07 19:49:52 发布

@lucky.

最新推荐文章于 2025-04-07 19:49:52 发布

阅读量415

点赞数 8

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/weixin_44883704/article/details/135669499

版权

本文介绍了如何使用Vue.js和CSS来实现一个简单的响应式瀑布流布局，通过列数设置和避免内联元素换行，展示左列和右列的动态布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css简单实现瀑布流

<template>
  <view class="box">
    <!-- 左列 -->
    <view class="box-list">
      <view class="box-list-item" v-for="(item, index) in leftArr" :key="index" :style="item.style">{{
        item.text
      }}</view>
    </view>
    <!-- 右列 -->
    <view class="box-list">
      <view class="box-list-item" v-for="(item, index) in rightArr" :key="index" :style="item.style">{{
        item.text
      }}</view>
    </view>
  </view>
</template>
<script lang="ts" setup>

const list = [
  {
    text: '1',
    style: 'height:100rpx;'
  },
  {
    text: '2',
    style: 'height:200rpx'
  },
  {
    text: '3',
    style: 'height:300rpx;'
  },
  {
    text: '4',
    style: 'height:100rpx'
  },
  {
    text: '5',
    style: 'height:200rpx;'
  },
  {
    text: '6',
    style: 'height:200rpx'
  },
  {
    text: '7',
    style: 'height:100rpx;'
  },
  {
    text: '8',
    style: 'height:100rpx'
  },
  {
    text: '9',
    style: 'height:200rpx;'
  },
  {
    text: '10',
    style: 'height:400rpx'
  }
]

// 左列
let leftArr = ref([])
// 右列
let rightArr = ref([])

// 将数组分成左右两列
list.forEach((item, index) => {
  if (index % 2 === 0) {
    leftArr.value.push(item)
  } else {
    rightArr.value.push(item)
  }
})

</script>
<style scoped lang="scss">
.box {
  padding: 32rpx;
  // 分几列
  column-count: 2;
  -moz-column-count: 2;
  -webkit-column-count: 2;
  // 列间距
  column-gap: 1em;
  -moz-column-gap: 1em;
  -webkit-column-gap: 1em;
  
  &-list {
    // 防止列分割
    page-break-inside: avoid;
    -moz-page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    &-item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 300rpx;
      background: rgb(116, 192, 236);
      color: #fff;
      margin-bottom: 20rpx;
    }
  }
}
</style>