使用 vue-waterfall2插件 vue 瀑布流

一、安装 vue-waterfall2`

npm install --save vue-waterfall2

二、在main.js里面引入

import waterfall from 'vue-waterfall2'Vue.use(waterfall)

目录结构：

waterfall

​ compontens

​ load.vue

​ index.vue

​ index.less

Index.vue

<template><div class="container_water_fall water_content"><waterfall :col="col" :data="data" @loadmore="loadmore"><template><div class="cell_item" v-for="(item, index) in data" :key="index"><imgv-if="item.img"class="cell_item_img":src="item.img"alt="加载错误"/><div class="item-body"><div class="item-title">{{ item.title }}</div><div class="item-footer"><div class="name">{{ item.user }}</div><div class="like"><div class="item_title">￥{{ item.like }}</div><div class="item_sold">已售888件</div></div></div></div></div></template></waterfall><loading :show="loading" /></div></template><script>/*注意:1.itemWidth需要与gutterWidth一起使用才会生效，否则会进行自适应宽度2.使用了waterfall的组件不允许使用scoped,否则样式会有问题*/import loading from "./components/load";export default {props: {title: String,},components: {loading,},data() {return {data: [],col: 2,loading: false,originData: [{img:"//upload/8a316140.png?w=377&h=451&x-oss-process=image/resize,w_1080",avatar:"/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "最近浴室新宠，日系神仙好物了解一下～",user: "描述呗",like: "953",},{img:"//upload/083767f0.JPG?w=828&h=620&x-oss-process=image/resize,w_1080",avatar:"/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "150元搞定全套护肤品，这些护肤好物必须交出来！",user: "迷人的小妖精迷人的小妖精",like: "952",},{img:"//upload/02a4f38d.jpg?w=1067&h=1067&x-oss-process=image/resize,w_1080",avatar:"/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "最近浴室新宠，日系神仙好物了解一下～",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"//upload/589585c1.jpeg?x-oss-process=image/resize,w_1080",avatar:"/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "150元搞定全套护肤品，这些护肤好物必须交出来！",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"//upload/d862d932.jpg?w=1080&h=1440&x-oss-process=image/resize,w_1080",avatar:"/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "最近浴室新宠，日系神仙好物了解一下～",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"//upload/eb4fb58f.jpg?w=1080&h=1080&x-oss-process=image/resize,w_1080",avatar:"/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "150元搞定全套护肤品，这些护肤好物必须交出来！",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"//upload/71d19462.jpg?x-oss-process=image/resize,w_1080",avatar:"/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title:"贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"//upload/415f984f.jpeg?w=828&h=1104&x-oss-process=image/resize,w_1080",avatar:"/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"//upload/5c3e51e4.jpg?w=720&h=960&x-oss-process=image/resize,w_1080",avatar:"/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "夏天用这款姨妈巾，让你体验真正的清爽",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"//upload/92761043.JPG?w=1000&h=999&x-oss-process=image/resize,w_1080",avatar:"/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "最近浴室新宠，日系神仙好物了解一下～",user: "迷人的小妖精迷人的小妖精123",like: "953",},{img:"//upload/da61c0f5.jpg?w=959&h=958&x-oss-process=image/resize,w_1080",avatar:"/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"//upload/fcd68df4.jpg?w=1080&h=1080&x-oss-process=image/resize,w_1080",avatar:"/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "最近浴室新宠，日系神仙好物了解一下～",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"//upload/bef41e67.JPG?w=712&h=534&x-oss-process=image/resize,w_1080",avatar:"/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "夏天用这款姨妈巾，让你体验真正的清爽",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"//upload/25ab20fe.JPG?w=1000&h=1200&x-oss-process=image/resize,w_1080",avatar:"/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "150元搞定全套护肤品，这些护肤好物必须交出来！",user: "迷人的小妖精迷人的小妖精123",like: "953",},{img:"/eb971d00-05ab-5b2a-ba03-52d8f544c42b?imageView2/2/w/400/q/50/format/jpg",avatar:"/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "最近浴室新宠，日系神仙好物了解一下～",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"//upload/4a3c1788.jpg?w=823&h=1000&x-oss-process=image/resize,w_1080",avatar:"/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "夏天用这款姨妈巾，让你体验真正的清爽",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"//upload/0a89e6b7.jpg?w=1080&h=1920&x-oss-process=image/resize,w_1080",avatar:"/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"//upload/99253111.jpg?w=1080&h=1920&x-oss-process=image/resize,w_1080",avatar:"/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "150元搞定全套护肤品，这些护肤好物必须交出来！",user: "迷人的小妖精迷人的小妖精123",like: "953",},{img:"//upload/13afe9a7.jpg?x-oss-process=image/resize,w_1080",avatar:"/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title:"贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"//upload/98c7c4c3.jpg?w=1210&h=1210&x-oss-process=image/resize,w_1080",avatar:"/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "150元搞定全套护肤品，这些护肤好物必须交出来！",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"//upload/54c5d7b4.jpg?w=828&h=991&x-oss-process=image/resize,w_1080",avatar:"/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "150元搞定全套护肤品，这些护肤好物必须交出来！",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"//upload/71d19462.jpg?x-oss-process=image/resize,w_1080",avatar:"/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "夏天用这款姨妈巾，让你体验真正的清爽",user: "迷人的小妖精迷人的小妖精123",like: "953",},{img:"//upload/642cb83c.jpeg?w=1080&h=1080&x-oss-process=image/resize,w_1080",avatar:"/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "150元搞定全套护肤品，这些护肤好物必须交出来！",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"//upload/31e42833.jpg?w=750&h=750&x-oss-process=image/resize,w_1080",avatar:"/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "150元搞定全套护肤品，这些护肤好物必须交出来！",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"//upload/92761043.JPG?w=1000&h=999&x-oss-process=image/resize,w_1080",avatar:"/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "夏天用这款姨妈巾，让你体验真正的清爽",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"//upload/60cc9b8e.jpg?w=991&h=744&x-oss-process=image/resize,w_1080",avatar:"/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "150元搞定全套护肤品，这些护肤好物必须交出来！",user: "迷人的小妖精迷人的小妖精123",like: "953",},{img:"//upload/b709ed72.jpg?w=552&h=414&x-oss-process=image/resize,w_1080",avatar:"/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "最近浴室新宠，日系神仙好物了解一下～",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"//upload/137b50b0.jpg?x-oss-process=image/resize,w_1080",avatar:"/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "夏天用这款姨妈巾，让你体验真正的清爽",user: "迷人的小妖精迷人的小妖精",like: "952",},{img:"//upload/31e42833.jpg?w=750&h=750&x-oss-process=image/resize,w_1080",avatar:"/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "最近浴室新宠，日系神仙好物了解一下～",user: "迷人的小妖精迷人的小妖精",like: "953",},],};},methods: {loadmore() {console.log(9999);if (!this.loading) {this.loading = true;setTimeout(() => {this.data = this.data.concat(this.originData, this.originData);this.loading = false;}, 1000);}},},mounted() {console.log("cascadeShow");this.data = this.originData;},};</script><style lang="less" scoped>.container_water_fall {box-sizing: border-box;&.water_content {margin: 0 15px;}.cell_item {width: 100%;background: #ffffff;overflow: hidden;box-sizing: border-box;border-radius: 6px;margin-top: 10px;.cell_item_img {border-radius: 12px 12px 0 0;width: 100%;height: auto;display: block;}.item-body {// border: 1px solid #F0F0F0;padding: 12px;.item-title {font-size: 30px;color: #333333;font-weight: bold;}.item-footer {position: relative;display: flex;justify-content: left;flex-direction: column;.avatar {width: 44px;height: 44px;border-radius: 50%;background-repeat: no-repeat;background-size: contain;}.name {font-size: 22px;color: #fc8800;}.like {right: 0;display: flex;align-items: center;.item_title {font-size: 30px;color: #f63b66;}.item_sold {font-size: 24px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;color: #999;}}}}}}</style>

index.less

.container-water-fall {box-sizing: border-box;&.water-content {margin: 0 15px;}h4 {padding-top: 56px;padding-bottom: 28px;font-family: PingFangSC-Medium;font-size: 36px;color: #000000;letter-spacing: 1px;text-align: justify;}button {background-color: #ff0;color: #24292e;border: 1px solid rgba(27, 31, 35, 0.2);border-radius: 0.25em;width: 100px;line-height: 26px;font-size: 13px;margin: 4px 0;margin-right: 4px;cursor: pointer;outline: none;&.blue-light {background: #27fbc2;}}button:hover {background-image: linear-gradient(-180deg, #fafbfc, #ccc 90%);}.cell-item {width: 100%;background: #ffffff;overflow: hidden;box-sizing: border-box;border-radius: 6px;margin-top: 10px;img {// border-radius: 12px 12px 0 0;width: 100%;height: auto;display: block;}.item-body {// border: 1px solid #F0F0F0;padding: 12px;.item-desc {font-size: 15px;color: #333333;line-height: 15px;font-weight: bold;}.item-footer {margin-top: 22px;position: relative;display: flex;align-items: center;.avatar {width: 44px;height: 44px;border-radius: 50%;background-repeat: no-repeat;background-size: contain;}.name {max-width: 150px;margin-left: 10px;font-size: 14px;color: #999999;}.like {position: absolute;right: 0;display: flex;align-items: center;&.active {i {}.like-total {color: #ff4479;}}i {width: 28px;display: block;}.like-total {margin-left: 10px;font-size: 12px;color: #999999;}}}}}}.githubdata {float: right;margin-right: 90px;img {width: 14px;// height: 16px;}}