vue3＜script setup＞瀑布流写法

<template>
  <div>
    <div class="content">
      <div class="list" v-for="(item, index) in itemList" :key="index">
        <img class="image" :src="item.imageSrc" alt="item image">
        <div class="title">{{ item.title }}</div>
        <div class="con">{{ item.content }}</div>
      </div>
    </div>
  </div>
</template>
<script setup>
const itemList = [
  {
    imageSrc: 'https://pic.imgdb.cn/item/65084fd3204c2e34d3a96817.jpg',
    title: '我是标题1',
    content: '我是内容1',
  },
  {
    imageSrc: 'https://pic.imgdb.cn/item/650850d7204c2e34d3a984ca.jpg',
    title: '我是标题2',
    content: '我是内容2',
  },
  {
    imageSrc: 'https://pic.imgdb.cn/item/64eee7e1661c6c8e54a86a07.jpg',
    title: '我是标题3',
    content: '我是内容3',
  },
  {
    imageSrc: 'https://pic.imgdb.cn/item/65085109204c2e34d3a9933c.jpg',
    title: '我是标题4',
    content: '我是内容4',
  },
  {
    imageSrc: 'https://pic.imgdb.cn/item/65084fd3204c2e34d3a96817.jpg',
    title: '我是标题5',
    content: '我是内容5',
  },
];
</script>
<style scoped>
.content {
  padding: 30rpx;
  box-sizing: border-box;
  column-count: 2;
}
.image {
  width: 100%;
  border-radius: 6rpx;
}
.title {
  margin-left: 15rpx;
  margin-right: 15rpx;
  font-size: 30rpx;
}
.con {
  margin: 15rpx;
  margin-top: 20rpx;
  display: flex;
  font-size: 26rpx;
  align-items: center;
  justify-content: space-between;
}
.list {
  break-inside: avoid;
  width: 330rpx;
  border: 1px solid #f4f4f4;
}
</style>