使用 vue-waterfall2插件 vue 瀑布流

最新推荐文章于 2022-01-07 15:52:45 发布
最新推荐文章于 2022-01-07 15:52:45 发布
阅读量1k 收藏 3
点赞数
分类专栏： Vue html 文章标签： vue 瀑布流
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuj1935/article/details/115062310
版权
Vue 同时被 2 个专栏收录
66 篇文章 2 订阅
订阅专栏
html
4 篇文章 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;
    }
  }
前端酱紫
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue-waterfall2:适用于vue的瀑布自适应插件，支持延迟加载，非常简单！
05-11
Vue瀑布2 自动适应宽度和高度 高度定制 支持延迟加载（带有lazy-src属性） 适用于PC /手机 如果您有任何疑问，欢迎描述问题，建议；谢谢您的评分！ 演示版 npm i npm run dev 安装 npm i vue-waterfall2@latest --save 道具 名称 默认 类型 描述 高度 -- 细绳 容器高度（对于窗口滚动事件，为null，对于容器滚动，不为null） 关口 2个 数字 列数 宽度 -- 数字 宽度值 gutterWidth 10 数字 保证金的价值 数据 [] 大批 数据 isTransition 真的 布尔型 加载带有过渡的图像 延迟距离 300 数字 图像延迟加载的距离 loadDistance 300 数字 负载距离更多 延迟加载 对于需要延迟加载的图像，需要使用'lazy-src'属性 < waterfal
vuewaterfall2基于Vuejs瀑布流组件宽高自适应滚动加载
08-09
宽高自适应，支持PC/移动端，提供滚动加载; 自定义程度高,布局未采用绝对定位
vue插件瀑布流之 vue-waterfall2
热门推荐
前端小知识
07-29 1万+
步骤一：安装依赖 npm i vue-waterfall2@latest --save 步骤二：main.js中引入 import waterfall from 'vue-waterfall2' Vue.use(waterfall) 属性 Name Default Type Desc height - String 容器高度(height为空监听的是window的滚动事件，不为空则监听容器滚动) col 2 Number 列.
vue 实现瀑布流 vue-waterfall2
kkkklkm的博客
07-10 223
属性 描述 用法 补充 fillStyle context.fillStyle=color|gradient|pattern;
vue实现简单瀑布流布局(vue-waterfall2)
weixin_44590591的博客
09-15 6313
1、安装vue-waterfall2 npm i vue-waterfall2@latest --save 或者 yarn add vue-waterfall2@latest --save 2、main.js中全局使用 注意：如果不在main.js全局引入，而在某个页面import引入的话,会报render渲染错误 import Vue from 'vue' import App from './App.vue' import router from "@/router"; import Elem
vue瀑布流组件(vue-waterfall-easy 2.x)
02-21
vue瀑布流组件(vue-waterfall-easy 2.x) 这是一个vue组件，包含瀑布流布局和无限滚动加载 与其他实现相比，无需在返回的数据中指定图像的宽度和高度 正是因为有了第二项，图像才被预加载，然后进行布局 响应式...
kuan-vue-waterfall:vue3.0瀑布流插件
05-12
kuan-vue-waterfall （vue3.0 瀑布插件）不需要设置内容高度，间隙默认 0注意：如果没有图片需要延迟获取元素尺寸的话，可以设置delay=false，等待图片加载后显示元素体验比较差安装yarn add kuan-vue-waterfall# ...
vue.js组件vue-waterfall-easy实现瀑布流效果
12-12
想必大家应该很多都已经习惯了jquery的DOM操作，jquery的瀑布流实现起来也很容易。 但是，随着时代的发展，随着时代的进步….. 算了算了，扯远了，既然能找到这儿来，肯定是在vue.js上已经有一定的基础了，咱们废话...
vue中使用vue-waterfall2来实现瀑布流
lll19960406的博客
07-30 567
在很多项目中，会有图文列表或者图片列表的出现，图片宽度好设定，但是高度往往不能设置成定值，一旦图片长款不成比例，就会显得很难看。 所以使用瀑布流可以完美实现这个问题，图片只需要设定宽度，高度自适应，就可以完美实现。 下边我们来说说怎样来实现------------------这个是针对图片以及带文字的卡片 1：安装 yarn addvue-waterfall2 2：引用，在main.js中...
vue2.0的瀑布流组件-使用说明
anda9128的博客
12-20 456
做一个小项目，需要瀑布流，就选他了，先看看效果 使用瀑布流布局组件：vue-waterfall-easy 下载引入： 方式一：直接从git上复制组件的完整代码，引入vue组件文件即可 import vueWaterfallEasy from '你的路径/组件名.vue' ...
【vue-waterfall2组件】
evo1233的博客
01-07 1264
瀑布流插件 npm i vue-waterfall2@latest --save Name Default Type Desc height 100% String 容器高度 col 2 Number 列数 width - Number 宽度 gutterWidth 10 Number 间隔的宽度 data [] Array 数据 isTransition true
vue-waterfall2 基于Vue.js 瀑布流组件
weixin_33850890的博客
11-16 1557
vue-waterfall2 1.宽度自适应,数据绑定特效(适用于上拉加载更多) 2.自定义程度高 3.使用极为简便,适用于PC/移动端 4.提供resize(强制刷新布局-适用于下拉刷新)/mix(扰乱布局) API，一般情况下不需要用到 5.后期将持续更新，提供animation（过渡动画） Demo DEMOGITHUB Ins...
使用vue做移动端瀑布流分页
weixin_30339457的博客
05-16 297
讲到瀑布流分页有一个方法一定是要用到的pullToRefresh(),或者说还有一种代码量比较少，但是看起来不怎么高端的 这个也没什么好解释的，想了解的可以去百度一下 下面上代码 <div id="main" class="content" style="background-color: #FFFFFF; width: 100%;height:100%;positi...
结合vue实现移动端页面的瀑布流布局
Hello World
08-15 2553
参考博客：浅谈瀑布流原理及Vue实现 结合自己项目的需求进行修改 基本原理：多行等宽不等高元素排列。第一排图片的顶部会处于同一个高度，依次排列在顶端，第二行以及之后的行则利用定位在最短的一列下面进行排列 效果图： // 封装了WaterFallFlow.vue子组件 <template> <div class="waterfall_container"> <div v-for="(item, index) in waterfallList"
vue瀑布流布局
weixin_44714325的博客
07-15 447
vue版如图： // 安装组件vue-waterfall2 npn install vue-waterfall2 -S // main.js 注册使用组件 import waterfall from 'vue-waterfall2' Vue.use(waterfall) // list.vue // 说明下：width/单个列表的宽度，gutterWidth/左列表距右侧的边距（博主这里的动态赋值操作可忽略，因为是为了做示例项目的全端适配） <template> <waterfall
vue-waterfall2瀑布流使用及坑
furfur-jiang的博客
06-03 3794
效果展示 出现问题 右侧出现两层滚动栏： 解决* { margin: 0; } 不响应式，直接拉取整个项目尝试后解决，官方文档内容无效 使用： 直接初始化一个vue项目 npm install npm install --save vue-waterfall2 main.js引入 Vue.config.productionTip = false import waterfall from 'vue-waterfall2' App.vue <template> <div
vue实现瀑布流（定位）
Zxf_xcn的博客
11-12 220
<template> <div class="v-waterfall-content" ref="v-waterfall" id="v-waterfall"> <div v-for="(img, i) in waterfallList" :key="i" class="v-waterfall-item" :style="{ top: img.top + 'px', left: img.l
vuejs实现瀑布流布局（三）
weixin_30258027的博客
07-05 485
前面写过vuejs实现的瀑布流布局，《vuejs实现瀑布流布局（一）》和《vuejs实现瀑布流布局（二）》也确实实现了瀑布流布局，但是这个是基于SUI-Mobile实现的无限滚动。 近日稍有空闲，回头重新实现了一下移动端的瀑布流布局，摆脱了移动端UI框架的束缚。 移动端的适配，采用的是adaptive-version2.js，而无限加载采用的是Vue Scroller。 最终实现的效果大致如...
vue-waterfall2 触底加载
最新发布
06-07
vue-waterfall2 是一个 Vue.js 的瀑布流组件，可以实现类似 Pinterest 的布局效果。要实现触底加载功能，需要在组件中监听滚动事件，判断滚动条是否到达底部，然后触发加载更多数据的方法。 以下是一个简单的示例代码： ```vue <template> <waterfall :list="list" :options="options" @scroll="handleScroll"></waterfall> </template> <script> import Waterfall from 'vue-waterfall2' export default { components: { Waterfall }, data() { return { list: [], // 列表数据 options: { // 瀑布流配置项 }, currentPage: 1, // 当前页码 isEnd: false, // 是否已经加载完所有数据 } }, mounted() { this.loadMore() }, methods: { loadMore() { if (this.isEnd) return // 发送请求获取数据，这里假设返回一个 Promise 对象 fetchData(this.currentPage).then((data) => { if (data.length) { this.list = this.list.concat(data) this.currentPage++ } else { this.isEnd = true } }) }, handleScroll(position) { // 监听滚动事件 const { maxY } = position if (maxY <= window.innerHeight) { this.loadMore() } }, }, } </script> ``` 在这个示例中，我们定义了一个 `list` 数组来存放列表数据，`options` 对象用来配置瀑布流效果。在 `mounted` 钩子函数中，我们首次加载数据。`loadMore` 方法用来加载更多数据，其中 `fetchData` 方法用来发送网络请求获取数据。在 `handleScroll` 方法中，我们监听了 `waterfall` 组件的滚动事件，当滚动到底部时触发加载更多数据的方法。`isEnd` 变量用来判断是否已经加载完所有数据，避免重复请求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端酱紫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值