一、安裝 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:"https://image.watsons.com.cn//upload/8a316140.png?w=377&h=451&x-oss-process=image/resize,w_1080",avatar:"https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "最近浴室新寵，日系神仙好物了解一下～",user: "描述唄",like: "953",},{img:"https://image.watsons.com.cn//upload/083767f0.JPG?w=828&h=620&x-oss-process=image/resize,w_1080",avatar:"https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "150元搞定全套護膚品，這些護膚好物必須交出來！",user: "迷人的小妖精迷人的小妖精",like: "952",},{img:"https://image.watsons.com.cn//upload/02a4f38d.jpg?w=1067&h=1067&x-oss-process=image/resize,w_1080",avatar:"https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "最近浴室新寵，日系神仙好物了解一下～",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"https://image.watsons.com.cn//upload/589585c1.jpeg?x-oss-process=image/resize,w_1080",avatar:"https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "150元搞定全套護膚品，這些護膚好物必須交出來！",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"https://image.watsons.com.cn//upload/d862d932.jpg?w=1080&h=1440&x-oss-process=image/resize,w_1080",avatar:"https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "最近浴室新寵，日系神仙好物了解一下～",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"https://image.watsons.com.cn//upload/eb4fb58f.jpg?w=1080&h=1080&x-oss-process=image/resize,w_1080",avatar:"https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "150元搞定全套護膚品，這些護膚好物必須交出來！",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"https://image.watsons.com.cn//upload/71d19462.jpg?x-oss-process=image/resize,w_1080",avatar:"https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title:"貴婦級好用的水乳有哪些呢？千萬不要去亂嘗試貴婦級好用的水乳有哪些呢？",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"https://image.watsons.com.cn//upload/415f984f.jpeg?w=828&h=1104&x-oss-process=image/resize,w_1080",avatar:"https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "千萬不要去亂嘗試貴婦級好用的水乳有哪些呢？千萬不要去亂嘗試",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"https://image.watsons.com.cn//upload/5c3e51e4.jpg?w=720&h=960&x-oss-process=image/resize,w_1080",avatar:"https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "夏天用這款姨媽巾，讓你體驗真正的清爽",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"https://image.watsons.com.cn//upload/92761043.JPG?w=1000&h=999&x-oss-process=image/resize,w_1080",avatar:"https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "最近浴室新寵，日系神仙好物了解一下～",user: "迷人的小妖精迷人的小妖精123",like: "953",},{img:"https://image.watsons.com.cn//upload/da61c0f5.jpg?w=959&h=958&x-oss-process=image/resize,w_1080",avatar:"https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "千萬不要去亂嘗試貴婦級好用的水乳有哪些呢？千萬不要去亂嘗試",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"https://image.watsons.com.cn//upload/fcd68df4.jpg?w=1080&h=1080&x-oss-process=image/resize,w_1080",avatar:"https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "最近浴室新寵，日系神仙好物了解一下～",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"https://image.watsons.com.cn//upload/bef41e67.JPG?w=712&h=534&x-oss-process=image/resize,w_1080",avatar:"https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "夏天用這款姨媽巾，讓你體驗真正的清爽",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"https://image.watsons.com.cn//upload/25ab20fe.JPG?w=1000&h=1200&x-oss-process=image/resize,w_1080",avatar:"https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "150元搞定全套護膚品，這些護膚好物必須交出來！",user: "迷人的小妖精迷人的小妖精123",like: "953",},{img:"https://ci.xiaohongshu.com/eb971d00-05ab-5b2a-ba03-52d8f544c42b?imageView2/2/w/400/q/50/format/jpg",avatar:"https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "最近浴室新寵，日系神仙好物了解一下～",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"https://image.watsons.com.cn//upload/4a3c1788.jpg?w=823&h=1000&x-oss-process=image/resize,w_1080",avatar:"https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "夏天用這款姨媽巾，讓你體驗真正的清爽",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"https://image.watsons.com.cn//upload/0a89e6b7.jpg?w=1080&h=1920&x-oss-process=image/resize,w_1080",avatar:"https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "千萬不要去亂嘗試貴婦級好用的水乳有哪些呢？千萬不要去亂嘗試",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"https://image.watsons.com.cn//upload/99253111.jpg?w=1080&h=1920&x-oss-process=image/resize,w_1080",avatar:"https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "150元搞定全套護膚品，這些護膚好物必須交出來！",user: "迷人的小妖精迷人的小妖精123",like: "953",},{img:"https://image.watsons.com.cn//upload/13afe9a7.jpg?x-oss-process=image/resize,w_1080",avatar:"https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title:"貴婦級好用的水乳有哪些呢？千萬不要去亂嘗試貴婦級好用的水乳有哪些呢？千萬不要去亂嘗試貴婦級好用的水乳有哪些呢？千萬不要去亂嘗試",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"https://image.watsons.com.cn//upload/98c7c4c3.jpg?w=1210&h=1210&x-oss-process=image/resize,w_1080",avatar:"https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "150元搞定全套護膚品，這些護膚好物必須交出來！",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"https://image.watsons.com.cn//upload/54c5d7b4.jpg?w=828&h=991&x-oss-process=image/resize,w_1080",avatar:"https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "150元搞定全套護膚品，這些護膚好物必須交出來！",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"https://image.watsons.com.cn//upload/71d19462.jpg?x-oss-process=image/resize,w_1080",avatar:"https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "夏天用這款姨媽巾，讓你體驗真正的清爽",user: "迷人的小妖精迷人的小妖精123",like: "953",},{img:"https://image.watsons.com.cn//upload/642cb83c.jpeg?w=1080&h=1080&x-oss-process=image/resize,w_1080",avatar:"https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "150元搞定全套護膚品，這些護膚好物必須交出來！",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"https://image.watsons.com.cn//upload/31e42833.jpg?w=750&h=750&x-oss-process=image/resize,w_1080",avatar:"https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "150元搞定全套護膚品，這些護膚好物必須交出來！",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"https://image.watsons.com.cn//upload/92761043.JPG?w=1000&h=999&x-oss-process=image/resize,w_1080",avatar:"https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "夏天用這款姨媽巾，讓你體驗真正的清爽",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"https://image.watsons.com.cn//upload/60cc9b8e.jpg?w=991&h=744&x-oss-process=image/resize,w_1080",avatar:"https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "150元搞定全套護膚品，這些護膚好物必須交出來！",user: "迷人的小妖精迷人的小妖精123",like: "953",},{img:"https://image.watsons.com.cn//upload/b709ed72.jpg?w=552&h=414&x-oss-process=image/resize,w_1080",avatar:"https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "最近浴室新寵，日系神仙好物了解一下～",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"https://image.watsons.com.cn//upload/137b50b0.jpg?x-oss-process=image/resize,w_1080",avatar:"https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "夏天用這款姨媽巾，讓你體驗真正的清爽",user: "迷人的小妖精迷人的小妖精",like: "952",},{img:"https://image.watsons.com.cn//upload/31e42833.jpg?w=750&h=750&x-oss-process=image/resize,w_1080",avatar:"https://img.xiaohongshu.com/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;}}

總結

以上是生活随笔為你收集整理的使用 vue-waterfall2插件 vue 瀑布流的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。