You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
352 lines
8.2 KiB
352 lines
8.2 KiB
<template>
|
|
<view class="waterfall-layout">
|
|
<!-- 瀑布流容器 -->
|
|
<view
|
|
class="waterfall-container"
|
|
:style="{ height: containerHeight + 'rpx' }"
|
|
>
|
|
<view
|
|
class="waterfall-item"
|
|
v-for="(item, index) in positionedItems"
|
|
:key="item.id"
|
|
:style="{
|
|
position: 'absolute',
|
|
left: item.left + 'rpx',
|
|
top: item.top + 'rpx',
|
|
width: item.width + 'rpx',
|
|
}"
|
|
@click="handleItemClick(item)"
|
|
>
|
|
<!-- 图片 -->
|
|
<image
|
|
v-if="item.image"
|
|
:src="item.image"
|
|
class="item-image"
|
|
mode="aspectFill"
|
|
/>
|
|
<!-- 内容区域 -->
|
|
<view class="item-content">
|
|
<text v-if="item.title" class="item-title">{{ item.title }}</text>
|
|
<text v-if="item.description" class="item-desc">{{
|
|
item.description
|
|
}}</text>
|
|
<view v-if="item.tags && item.tags.length" class="item-tags">
|
|
<text class="tag" v-for="tag in item.tags" :key="tag">{{
|
|
tag
|
|
}}</text>
|
|
</view>
|
|
<!-- 用户信息和点赞 -->
|
|
<view v-if="item.user" class="item-footer">
|
|
<view class="user-info">
|
|
<image
|
|
:src="item.user.avatar"
|
|
class="user-avatar"
|
|
mode="aspectFill"
|
|
/>
|
|
<text class="username">{{ item.user.name }}</text>
|
|
</view>
|
|
<view class="like-info">
|
|
<text class="like-icon">♥</text>
|
|
<text class="like-count">{{ item.likes }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "WaterfallLayout",
|
|
props: {
|
|
// 数据源
|
|
items: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
// 列数
|
|
columnCount: {
|
|
type: Number,
|
|
default: 2,
|
|
},
|
|
// 列间距（rpx）
|
|
columnGap: {
|
|
type: Number,
|
|
default: 16,
|
|
},
|
|
// 项目间距（rpx）
|
|
itemGap: {
|
|
type: Number,
|
|
default: 16,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
positionedItems: [],
|
|
containerHeight: 0,
|
|
columnHeights: [],
|
|
};
|
|
},
|
|
watch: {
|
|
items: {
|
|
handler() {
|
|
this.$nextTick(() => {
|
|
this.calculateLayout();
|
|
});
|
|
},
|
|
immediate: true,
|
|
deep: true,
|
|
},
|
|
},
|
|
mounted() {
|
|
this.calculateLayout();
|
|
},
|
|
methods: {
|
|
// 计算布局
|
|
calculateLayout() {
|
|
if (!this.items.length) {
|
|
this.positionedItems = [];
|
|
this.containerHeight = 0;
|
|
return;
|
|
}
|
|
|
|
// 初始化列高度
|
|
this.columnHeights = new Array(this.columnCount).fill(0);
|
|
this.positionedItems = [];
|
|
|
|
// 逐个处理项目
|
|
this.items.forEach((item, index) => {
|
|
this.calculateItemPosition(item, index);
|
|
});
|
|
|
|
// 设置容器高度
|
|
this.containerHeight = Math.max(...this.columnHeights) + this.itemGap;
|
|
},
|
|
|
|
// 计算单个项目位置
|
|
calculateItemPosition(item, index) {
|
|
// 找到最短的列
|
|
const shortestColumnIndex = this.columnHeights.indexOf(Math.min(...this.columnHeights))
|
|
|
|
// 协调的间距计算：左右边距20rpx，列间距16rpx
|
|
const sideMargin = 20 // 左右边距
|
|
const columnGap = 16 // 列间距
|
|
// 确保左右边距都是20rpx的计算方式
|
|
const availableWidth = 750 - 2 * sideMargin // 可用宽度 = 750 - 40 = 710rpx
|
|
const itemWidth = Math.floor((availableWidth - (this.columnCount - 1) * columnGap) / this.columnCount)
|
|
|
|
// 计算位置 - 确保左右边距都是20rpx
|
|
const left = sideMargin + shortestColumnIndex * (itemWidth + columnGap)
|
|
// 修正top计算：第一行距离顶部itemGap，后续项目距离上一个项目itemGap
|
|
const top = this.columnHeights[shortestColumnIndex] === 0 ? this.itemGap : this.columnHeights[shortestColumnIndex] + this.itemGap;
|
|
|
|
// 估算项目高度
|
|
const estimatedHeight = this.estimateItemHeight(item);
|
|
|
|
// 添加到定位项目数组
|
|
this.positionedItems.push({
|
|
...item,
|
|
left,
|
|
top,
|
|
width: itemWidth,
|
|
});
|
|
|
|
// 更新列高度
|
|
this.columnHeights[shortestColumnIndex] = top + estimatedHeight;
|
|
},
|
|
|
|
// 估算项目高度
|
|
estimateItemHeight(item) {
|
|
let height = 0;
|
|
|
|
// 图片高度
|
|
if (item.image) {
|
|
height += 300; // 图片固定高度
|
|
}
|
|
|
|
// 内容区域padding
|
|
height += 32; // 上下padding各16rpx
|
|
|
|
// 标题高度 - 更精确的计算
|
|
if (item.title) {
|
|
// 基于字符数和换行估算，考虑中英文混合
|
|
const titleLength = item.title.length;
|
|
const charsPerLine = 12; // 每行大约12个字符（考虑中文字符较宽）
|
|
const titleLines = Math.min(Math.ceil(titleLength / charsPerLine), 2);
|
|
height += titleLines * 40 + 12; // 行高40rpx（稍微增加） + 底部间距
|
|
}
|
|
|
|
// 描述高度 - 更精确的计算
|
|
if (item.description) {
|
|
const descLength = item.description.length;
|
|
const charsPerLine = 15; // 描述文字稍小，每行约15个字符
|
|
const descLines = Math.min(Math.ceil(descLength / charsPerLine), 2);
|
|
height += descLines * 36 + 16; // 行高36rpx + 底部间距
|
|
}
|
|
|
|
// 标签高度 - 考虑多行标签
|
|
if (item.tags && item.tags.length) {
|
|
// 估算标签可能占用的行数
|
|
const tagRows = Math.ceil(item.tags.length / 3); // 假设每行最多3个标签
|
|
height += tagRows * 36 + 16; // 每行标签高度36rpx + 底部间距
|
|
}
|
|
|
|
// 用户信息区域
|
|
if (item.user) {
|
|
height += 48 + 16; // 用户信息高度 + 底部间距
|
|
}
|
|
|
|
return height;
|
|
},
|
|
|
|
// 清空所有项目
|
|
clearItems() {
|
|
this.positionedItems = [];
|
|
this.containerHeight = 0;
|
|
this.columnHeights = new Array(this.columnCount).fill(0);
|
|
this.$emit("items-cleared");
|
|
},
|
|
|
|
// 处理项目点击
|
|
handleItemClick(item) {
|
|
this.$emit("item-click", item);
|
|
},
|
|
|
|
// 获取所有项目
|
|
getAllItems() {
|
|
return this.positionedItems;
|
|
},
|
|
|
|
// 移除项目
|
|
removeItem(itemId) {
|
|
const index = this.positionedItems.findIndex(
|
|
(item) => item.id === itemId
|
|
);
|
|
if (index !== -1) {
|
|
this.positionedItems.splice(index, 1);
|
|
this.calculateLayout(); // 重新计算布局
|
|
}
|
|
this.$emit("item-removed", itemId);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.waterfall-layout {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.waterfall-container {
|
|
position: relative;
|
|
width: 100%;
|
|
padding: 0 20rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.waterfall-item {
|
|
box-sizing: border-box;
|
|
border-radius: 12rpx;
|
|
background: #fff;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
|
|
overflow: hidden;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.waterfall-item:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.item-image {
|
|
width: 100%;
|
|
height: 300rpx;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.item-content {
|
|
padding: 16rpx;
|
|
}
|
|
|
|
.item-title {
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
line-height: 1.3;
|
|
margin-bottom: 12rpx;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.item-desc {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
line-height: 1.4;
|
|
margin-bottom: 16rpx;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.item-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8rpx;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.tag {
|
|
padding: 4rpx 12rpx;
|
|
background: #f5f5f5;
|
|
color: #666;
|
|
font-size: 20rpx;
|
|
border-radius: 12rpx;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.item-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 16rpx;
|
|
}
|
|
|
|
.user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12rpx;
|
|
}
|
|
|
|
.user-avatar {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.username {
|
|
font-size: 22rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.like-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6rpx;
|
|
}
|
|
|
|
.like-icon {
|
|
font-size: 24rpx;
|
|
color: #ff6b6b;
|
|
}
|
|
|
|
.like-count {
|
|
font-size: 22rpx;
|
|
color: #666;
|
|
}
|
|
</style>
|
|
|