share_h5/components/waterfall/waterfall.vue

<template>
	<view class="water-flow-box" >
		<view class="water-flow-column" :style="{ 'margin-right': columnGap + 'px' }" v-for="(col, c) in colunmList" :key="c">
			<view class="item" :id="col.id" style="width: 100%;">
				<view
					v-for="(item, index) in col.list"
					:key="index"
					class="item_content"
					:style="{ 'margin-bottom': columnGap + 'px', background: item.background }"
					@click="goTodetails(item)"
				>
				<image :src="item.cover" style="width: 100%;"></image>
				<view class="waterfall">
					<view class="waterfallitem">
						{{item.title}}
					</view>
					<view class="image">
						<view class="nickImg">
							<image :src="item.head_photo" class="tuxiang" mode=""></image>
							<view class="contentname">
								{{item.nickname?item.nickname:item.mobile}}
							</view>
						</view>
						<view class="fabulous">
							<image class="good" src="../../static/delImg/good.png" mode=""></image>
							<view class="contentnumber">
								{{item.like_num}}
							</view>
						</view>
					</view>
				</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'grass-water-flow',
	props: {
		fieldKey: {
			//关键比对key
			type: String,
			default: 'id'
		},
		idPrefix: {
			//前缀
			type: String,
			default: 'water-flow-'
		},
		colunmNumber: {
			//瀑布流列数
			type: Number,
			default: 2
		},
		columnGap: {
			//列间隔
			type: Number,
			default: 10
		},
		flowList: {
			// 瀑布流数据
			type: Array,
			required: true,
			default: function() {
				return [];
			}
		}
	},
	data() {
		return {
			colunmList: [], //列
			internalDataList: [], //内部操作数据
			refrenshColunmDataList: [] //记录加载的数据
		};
	},
	watch: {
		colunmNumber: function(v) {
			this.internalDataList = Object.assign([], this.refrenshColunmDataList);
			this.calculateColumn(v, false);
		},
		flowList: function(v) {
			this.internalDataList = Object.assign(this.internalDataList, v);
			if (this.internalDataList.length > 0) {
				this.getPushContainer();
			}
		},
		colunmList: {
			handler() {
				this.$nextTick(function() {
					this.getPushContainer();
				});
			},
			deep: true
		}
	},
	created() {
		this.internalDataList = Object.assign([], this.flowList);
		this.calculateColumn(this.colunmNumber, true);
	},
	mounted() {
		if (this.internalDataList.length > 0) {
			this.colunmList[0].list.push(this.internalDataList[0]);
			let shiftObj = this.internalDataList.shift();
			this.pushLoadData(shiftObj);
		}
	},
	methods: {
		/**
		 * 计算列
		 * @param {Object} size       列数
		 * @param {Object} isCreate   是否初始化创建(created生命周期)
		 */
		calculateColumn: function(size, isCreate) {
			this.colunmList = [];
			for (let i = 1; i <= size; i++) {
				let obj = {};
				obj.id = this.idPrefix + i;
				obj.list = [];
				this.colunmList.push(obj);
			}
			if (!isCreate) {
				if (this.internalDataList.length > 0) {
					this.colunmList[0].list.push(this.internalDataList[0]);
					let shiftObj = this.internalDataList.shift();
					this.pushLoadData(shiftObj);
				}
			}
		},
		/**
		 * 获取节点信息
		 */
		getPushContainer() {
			let sortList = [];
			const query = uni.createSelectorQuery().in(this);
			query
				.selectAll('.item')
				.boundingClientRect()
				.exec(res => {
					if (res) {
						sortList = res[0];
						sortList.sort(function(a, b) {
							return a.height - b.height;
						});
						this.pushShiftData(sortList[0]);
					}
				});
		},
		//商品跳详情
		goTodetails(item){
			uni.navigateTo({
				url:"./details?id="+item.id
			})
		},
		/**
		 * 处理数据
		 * @param {Object} pushObj
		 */
		pushShiftData(pushObj) {
			if (this.internalDataList.length > 0) {
				for (let i = 0; i < this.colunmList.length; i++) {
					if (this.colunmList[i].id == pushObj.id) {
						this.colunmList[i].list.push(this.internalDataList[0]);
						let shiftObj = this.internalDataList.shift();
						this.pushLoadData(shiftObj);
					}
				}
			}
		},
		/**
		 * 记录加载的数据
		 * @param {Object} obj
		 */
		pushLoadData(obj) {
			if (this.refrenshColunmDataList.length > 0) {
				let result = this.refrenshColunmDataList.some(item => {
					if (item[this.fieldKey] == obj[this.fieldKey]) {
						return true;
					}
				});
				if (!result) {
					this.refrenshColunmDataList.push(obj);
				}
			} else {
				this.refrenshColunmDataList.push(obj);
			}
		},
		/**
		 * 外部刷新数据时，调用此方法，清理掉原有加载数据
		 */
		externalRefrensh() {
			this.refrenshColunmDataList = [];
			for (let i = 0; i < this.colunmList.length; i++) {
				this.colunmList[i].list = [];
			}
		}
	}
};
</script>

<style scoped>
	uni-view.water-flow-column{
		background-color: transparent;
		margin: transparent;
	}
	.item_content{
		border-radius: 18rpx;
		margin-bottom: 42rpx;
		overflow: hidden;
		background-color: #fff;
	}
	.black{
		height: 30rpx;
		background-color: #f5f5f5;
	}
	.contentnumber{
		border-radius: 16rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #999999;
		margin-left: 10rpx;
	}
	.good{
		width: 29rpx;
		height: 31rpx;
		margin-left: 62rpx;
		
	}
	.contentname{
		width: 90rpx;
		flex: 1;
		color: #1a1a1a;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		margin-left: 13rpx;
	}
	.tuxiang{
		width: 50rpx;
		height: 50rpx;
	}
	.image{
		display: flex;
		padding: 9rpx 18rpx 22rpx 22rpx ;
		justify-content: space-between;
		align-items: center;
	}
	.image .nickImg,.image .fabulous{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.waterfallitem{
		padding: 15rpx 20rpx;
		font-size: 24rpx;
		line-height: 40rpx;
		color: #333333;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		word-wrap: break-word;
		word-break: break-all;
		white-space: normal !important;
	}
	
/* 瀑布流最外层 */
.water-flow-box {
	/* margin: 10px; */
	display: flex;
	flex-direction: row;
	height: auto;
	border-radius: 18rpx;
	padding: 50rpx 20rpx 42rpx 29rpx;
	
}

.water-flow-column {
	/* margin-right: 10px; */
	display: flex;
	flex-flow: column wrap;
	width: 100%;
	border-radius: 18rpx;
	background-color: white;
/* 	margin-bottom: 42rpx; */
}

.water-flow-box .water-flow-column:last-child {
	margin-right: 0px !important;
}

.water-flow-column > .item > .item_content {
	/* margin-bottom: 10px; */
	color: #ffffff;
/* 	text-align: center; */
	width: 100%;
}
</style>