css瀑布流（左右分布）

1. 先看效果

2. 实现效果为左右排列

3. 废话不多说直接上代码

<template>
  <view>
    <!-- 瀑布流布局列表 -->
    <view class="bg"></view>

    <view class="box">
      <view v-for="(item, index) in cardLists" :key="index">
        <view class="list-item" v-for="(k, i) in item" :key="i">
          <image class="item-img" :src="k.img" mode="widthFix"/>
          <view class="item-info">
            <view class="item-title">{{ k.name }}</view>
            <view class="item-price">
              <text class="price">￥</text>
              <text>{{ k.price }}</text>
            </view>
            <view class="item-name">来自云棉影视的旗舰店</view>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      //商品列表
      cardList: [
        {
          img: "http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg",
          name: '1.商品的名称，可以很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长',
          price: 100
        },
        {
          img: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
          name: '2.商品名称会在超出两行时候自动折叠',
          price: 100
        },
        {
          img: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
          name: '3.只有一行标题时高度为39',
          price: 100
        },
        {
          img: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
          name: '4.具体样式您可以自定义',
          price: 100
        },
        {
          img: '/static/image/1003-3.jpg',
          name: '5.vue的H5页面也是如此使用',
          price: 100
        },
        {
          img: '/static/image/house4.png',
          name: '6.vue的H5页面也是如此使用',
          price: 100
        },
        {
          img: '/static/img/goods.jpg',
          name: '7.vue的H5页面也是如此使用',
          price: 100
        },
        {
          img: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
          name: '8.vue的H5页面也是如此使用瀑布流的动态计算方法',
          price: 100
        },
      ],


      isShowList: false, // 控制瀑布流布局的可见性
      cardLists: [],     // 存储5个列的卡片数据

    };
  },
  onLoad() {
    this.getCard();  // 将数据平均分配到5个列中

    // 等待DOM更新完成,当所有操作完成，显示瀑布流布局
    this.$nextTick(() => {
      this.isShowList = true;
    })
  },
  methods: {
    // 将数据平均分配到5个列中
    getCard() {

      // 计算每列应该有的卡片数量
      const numCount = 2;
      const num = Math.ceil(this.cardList.length / numCount);
      console.log('num:::', num)

      // 初始化列数据
      for (let i = 0; i < numCount; i++) {
        this.cardLists[i] = [];

        // 将卡片分配到各列
        for (let j = 0; j < num; j++) {
          const index = i + j * numCount;

          // 如果索引在卡片列表范围内，则添加卡片
          if (index < this.cardList.length) {
            this.cardLists[i].push(this.cardList[index]);
          }
        }
      }

      console.log('cardLists+++++++', this.cardLists)

    },

  },

};
</script>

 

<style scoped lang="scss">
//瀑布流
.bg {
  background-color: #eee;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

.box {
  padding: 20rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.list-item {
  width: 345rpx;
  margin-bottom: 20rpx;
  border-radius: 15rpx;
  background-color: #ffffff;
  box-shadow: 0 0 28rpx 1rpx rgba(78, 101, 153, 0.14);

  .item-img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 15rpx 15rpx 0 0;
  }
}

.item-info {
  padding-left: 22rpx;
  font-size: 24rpx;
  padding-bottom: 22rpx;

  .item-title {
    line-height: 39rpx;
  }

  .item-price {
    color: #ff0000;
    font-size: 32rpx;
    line-height: 32rpx;
    font-weight: bold;
    padding-top: 22rpx;

    .price {
      font-size: 24rpx;
    }
  }

  .item-name {
    font-size: 28rpx;
    color: #909399;
    line-height: 32rpx;
    padding-top: 22rpx;
  }
}

</style>