uniapp 仿瀑布流效果

前言

• Hbuilder X 2.7.14.20200618 （不清楚uniapp的版本，用工具版本代替）
• 需求，如下图：
  

实现

数据文件 viewData.js

const flowList=[
	{
		title: '喜欢李白,张飞和刘备一起来打野,测试一下王者荣耀是否好玩,还要测试只显示两行文字多于三个点',
		image: '../../static/eg/viewList/1.jpg',
		date: '07-07',
		commentNum: 12,
		clickNum: 33,
	},
	{
		title: '望长城内外，惟余莽莽',
		image: '../../static/eg/viewList/2.jpg',
		date: '07-07',
		commentNum: 12,
		clickNum: 33,
	},
	{
		title: '大河上下，顿失滔滔',
		image: '../../static/eg/viewList/3.jpg',
		date: '07-07',
		commentNum: 12,
		clickNum: 33,
	},
	{
		title: '欲与天公试比高',
		image: '../../static/eg/viewList/4.jpg',
		date: '07-07',
		commentNum: 12,
		clickNum: 33,
	},
	{
		title: '须晴日，看红装素裹，分外妖娆',
		image: '../../static/eg/viewList/5.jpg',
		date: '07-07',
		commentNum: 12,
		clickNum: 33,
	},
	{
		title: '江山如此多娇，引无数英雄竞折腰',
		image: '../../static/eg/viewList/6.jpg',
		date: '07-07',
		commentNum: 12,
		clickNum: 33,
	},
	{
		title: '惜秦皇汉武，略输文采',
		image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23344_s.jpg',
		date: '07-07',
		commentNum: 12,
		clickNum: 33,
	},
	{
		title: '唐宗宋祖，稍逊风骚',
		image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
		date: '07-07',
		commentNum: 12,
		clickNum: 33,
	},
	{
		title: '一代天骄，成吉思汗',
		image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
		date: '07-07',
		commentNum: 12,
		clickNum: 33,
	},
	{
		title: '只识弯弓射大雕',
		image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
		date: '07-07',
		commentNum: 12,
		clickNum: 33,
	},
	{
		title: '俱往矣，数风流人物，还看今朝，还有多个点点点',
		image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
		date: '07-07',
		commentNum: 12,
		clickNum: 33,
	},
];

export default {
	flowList,
}

vue 文件 flow.vue

<template>
	<view class="content">
		<view class="flowPanel">
			<view class="leftPanel">
				<view class="itemContainer" v-for="(item,index) in flowList" :key="index" v-if="index%2==0">
					<img :src="item.image" mode="widthFix">
					<view class="title">{{item.title}}</view>
					<view class="info">
						<view class="left">
							<view class="date">{{item.date}}</view>
							<view class="commentNum">{{item.commentNum}}</view>
						</view>
						<view class="right">
							<view class="clickNum">{{item.clickNum}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="rightPanel">
				<view class="itemContainer" v-for="(item,index) in flowList" :key="index" v-if="index%2==1">
					<img :src="item.image" mode="widthFix">
					<view class="title">{{item.title}}</view>
					<view class="info">
						<view class="left">
							<view class="date">{{item.date}}</view>
							<view class="commentNum">{{item.commentNum}}</view>
						</view>
						<view class="right">
							<view class="clickNum">{{item.clickNum}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import dataJson from './viewJson.js';
	export default {
		data() {
			return {
				flowList: [],
			}
		},
		async onLoad() {
			// load data
			this.flowList = dataJson.flowList;
		},
		methods: {
			
		}
	}
</script>

<style>
	@import "./flowPanel.css";
	
	@font-face {
		font-family: "myfont";
		src: url("https://at.alicdn.com/t/font_1985981_791yzf7neql.ttf") format('truetype');
	}
	
	page{
		height: 100%;
	}
	view{
		display:flex;
		flex-direction: column;
		box-sizing: border-box;
	}
	.content{
		width: 100%;
		background-color: #ffffff;
		padding: 0 15px;
	}
</style>

css 文件 flowPanel.css

@charset "utf-8";

.flowPanel {
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
	overflow: hidden;
}

.flowPanel .leftPanel {
	width: 48%;
	overflow: hidden;
}

.flowPanel .rightPanel {
	width: 48%;
	overflow: hidden;
}

.flowPanel .itemContainer {
	margin-top: 10px;
	position: relative;
	display:flex;
	flex-direction: column;
}
.flowPanel image {
	width: 100%;
}

.flowPanel .itemContainer .title {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	word-wrap:break-word;
	word-break:break-all;
	color: #333;
	text-align: left;
	padding: 0.2em 0.5em;
}

.flowPanel .itemContainer .info {
	color: #8a8a8a;
	overflow: hidden;
	padding: 10px;
	border-top: 1px #e9e9e9 solid;
	flex-direction: row;
	justify-content: space-between;
}
.flowPanel .itemContainer .info .left {
	flex-direction: row;
}
.flowPanel .itemContainer .info .left .date {
	flex-direction: row;
	font-size: 11px;
	line-height: 11px;
}
.flowPanel .itemContainer .info .left .date:before {
	font-family: myfont;
	content: "\e63a"; 
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-webkit-text-stroke-width: .2px;
	padding-right: 2px;
}
.flowPanel .itemContainer .info .left .commentNum {
	padding-left: 5px;
	flex-direction: row;
	font-size: 11px;
	line-height: 11px;
}
.flowPanel .itemContainer .info .left .commentNum:before {
	font-family: myfont;
	content: "\e635";
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-webkit-text-stroke-width: .2px;
	padding-right: 2px;
}
.flowPanel .itemContainer .info .right {
	flex-direction: row;
}
.flowPanel .itemContainer .info .right .clickNum {
	flex-direction: row;
	font-size: 11px;
	line-height: 11px;
}
.flowPanel .itemContainer .info .right .clickNum:before {
	font-family: myfont;
	content: "\e633";
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-webkit-text-stroke-width: .2px;
	padding-right: 2px;
}

备注

制作图标库：https://www.jianshu.com/p/8e1f96c63092