使用 vue-waterfall2插件 vue 瀑布流

水深无声 2022-11-12 01:56 942阅读 0赞

一、安装 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">
              <img
                v-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;
        }
      }