前端vue仿京东天猫简单好用的瀑布流瀑布流式布局列表组件waterfall， 下载完整代码请访问uni-app插件市场址:https://ext.dcloud.net.cn/plugin?id=13046

效果图如下：

使用方法

<!--  proList: 条目数组数据  goProDetail:条目点击事件跳转（实现了点击条目数据传值）-->

<ccWaterListView :proList="projectList" @click="goProDetail"></ccWaterListView>

HTML代码部分

<template>

<view class="content">

<!--  proList: 条目数组数据  goProDetail:条目点击事件跳转（实现了点击条目数据传值）-->

<ccWaterListView :proList="projectList" @click="goProDetail"></ccWaterListView>

</view>

</template>

JS代码 （引入组件 填充数据）

<script>

import ccWaterListView from '../../components/ccList/ccWaterListView.vue';

export default {

components: {

ccWaterListView,

},

data() {

return {

// 列表数组

projectList: []

}

},

mounted() {

this.requestData();

},

methods: {

// 列表条目点击事件

goProDetail(item) {

console.log("条目数据 = " + JSON.stringify(item));

uni.showModal({

title:'选择条目',

content:'选择条目数据 = ' + JSON.stringify(item)

})

},

requestData() {

// 模拟请求参数设置

let reqData = {

'area': '',

"pageSize": 10,

"pageNo": this.curPageNum

}

// 模拟请求接口

this.totalNum = 39;

this.projectList = [];

let imgArr = ['https://images.pexels.com/photos/7214784/pexels-photo-7214784.jpeg?auto=compress&cs=tinysrgb&w=800',

'https://cdn.pixabay.com/photo/2014/07/08/14/14/resolution-387446_1280.jpg',

'https://images.pexels.com/photos/5202162/pexels-photo-5202162.jpeg?auto=compress&cs=tinysrgb&w=800',

'https://images.pexels.com/photos/4967533/pexels-photo-4967533.jpeg?auto=compress&cs=tinysrgb&w=800',

'https://images.pexels.com/photos/8679339/pexels-photo-8679339.jpeg?auto=compress&cs=tinysrgb&w=800',

'https://images.pexels.com/photos/209339/pexels-photo-209339.jpeg?auto=compress&cs=tinysrgb&w=800']

let nameArr = ['冰糖心苹果 红富士大果出售 应季水果 繁荣种植园','农鲜洛川红富士苹果16枚，单果160g,新鲜饱满水分充足','甜醉了 烟台苹果栖霞红富士新鲜水...','惠寻 山东烟台红富士苹果12枚 果径...']

for (let i = 0; i < 20; i++) {

this.projectList.push({

'proImg': imgArr[i%6],

'proName': nameArr[i%4],

'proDetail': '我是产品详情' + i,

'proPrice': 60 + 6 * i + '元',

'status': (i % 3 == 0)?'618':'',

'id': i + ''

});

}

}

}

}

</script>

CSS

<style>

page {

background-color: #f7f7f7;

}

.content {

display: flex;

flex-direction: column;

}

</style>