首先我们要清楚瀑布流是什么？
瀑布流布局（Waterfall Flow Layout），也称为瀑布流式布局，是一种常见的网页或移动应用布局方式，特点是元素以不规则的方式排列，就像瀑布中的流水一样，每个元素的高度可以不同。
主要特点和优点包括：
不规则的排列：瀑布流布局允许元素以不同的高度和宽度排列，因此适用于展示不同尺寸和形状的内容，如图片、卡片、商品等。
动态加载：可以通过滚动加载或异步加载来动态添加新的元素，以实现无限滚动效果，提高用户体验。
最大化利用空间：瀑布流布局可以更好地利用可用空间，因为元素会根据其实际高度自动填充空白区域，减少了页面空白和浪费。
适应性：适用于不同屏幕大小和设备类型，可以实现响应式布局，适应各种屏幕分辨率。
视觉吸引力：瀑布流布局在设计上常常呈现出视觉上的吸引力，因为元素的不规则排列可以创造出有趣的视觉效果。
mode="widthFix"什么意思？
当你设置一个图片的 mode 属性为 "widthFix" 时，图片的宽度将会被拉伸或缩小以适应容器的宽度，同时保持图片的原始宽高比例。这意味着图片的高度会根据宽度自动调整，以确保图片不会变形，并且整个图片都能在容器内显示，而不会超出容器或留有空白。
存html和css生成，javascript中仅仅只是用于渲染的假数据。
用于渲染的假数据
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',
},
],css样式部分
.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;
}对于css每一部分的介绍
-
.content：padding: 30rpx;：设置容器.content的内边距为 30rpx，这会在容器内部的内容和容器的边缘之间添加空间。box-sizing: border-box;：指定了盒子模型为border-box，这意味着内边距和边框的宽度不会增加容器的总宽度，以便更好地控制盒子的尺寸。column-count: 2;：将容器.content分成两列，实现多列布局效果。
-
image：width: 100%;：将所有图片的宽度设置为父容器宽度的100%，使图片自适应容器宽度。border-radius: 6rpx;：设置图片的圆角半径为6rpx，使图片的边角变得圆滑。
-
.title：margin-left: 15rpx;和margin-right: 15rpx;：设置标题文本的左右外边距为15rpx，这会在标题文本的左右两侧添加空白间距。font-size: 30rpx;：设置标题文本的字体大小为30rpx。
-
.con：margin: 15rpx;：设置内容区块的上下外边距为15rpx，以及左右外边距的默认值，创建上下间距。margin-top: 20rpx;：增加内容区块的上外边距，以增加上方的间距。display: flex;：将内容区块设置为弹性布局，以便内部元素可以灵活布局。font-size: 26rpx;：设置内容文本的字体大小为26rpx。align-items: center;：设置内容区块内元素的纵向对齐方式为居中对齐。justify-content: space-between;：设置内容区块内元素的横向对齐方式为两侧对齐，左右两侧留有空白空间。
-
.list：break-inside: avoid;：避免在列表项之间分页中断，以确保每个列表项在同一页内显示完整。width: 330rpx;：设置列表项的宽度为330rpx。border: 1px solid #f4f4f4;：给列表项添加1像素宽的实线边框，边框颜色为 #f4f4f4，用于界定列表项的边界。
HTML部分
循环自己获取到的数据，也就是itemList的数据，绑定一个下标循环渲染
<template>
<view>
<view class="content">
<view class="list" v-for="(item, index) in itemList" :key="index">
<image mode="widthFix" :src="item.imageSrc"></image>
<view class="title">{{ item.title }}</view>
<view class="con">{{ item.content }}</view>
</view>
</view>
</view>
</template>完整代码
<template>
<view>
<view class="content">
<view class="list" v-for="(item, index) in itemList" :key="index">
<image mode="widthFix" :src="item.imageSrc"></image>
<view class="title">{{ item.title }}</view>
<view class="con">{{ item.content }}</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
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',
},
],
};
},
onUnload() {},
methods: {},
};
</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>谢谢观看
