vue实现瀑布流+下拉加载更多

已于 2024-07-13 22:32:43 修改
阅读量152 收藏
点赞数 4
文章标签： vue.js javascript 前端
于 2024-07-13 15:17:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/overdose__/article/details/140400433
版权 

<template>
  <div ref="waterfallFlow" class="waterfallFlow-wrapper" :style="{height:Math.max(...columns)+'px'}">
    <div v-for="(item,index) in list" :style="{width:width+'px',transform:`translate(${item.x+'px'},${item.y+'px'})`}"
         class="waterfallFlow-item" :key="item.url+index">

      <img v-if="item.renderHeight" :style="{display: 'block',width: '100%'}" :src="item.url" alt="">
    </div>
  </div>
</template>
<script>
export default {
  name: 'waterfallFlow',
  data() {
    return {
      columns: [],
      columnNums: 0,
      width: 260,
      loadMore: false,
      list: [
        {
          url: 'https://photo.colorhub.me/7ctMvIy5wTY/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vZjYvNzYvOTYzM2VjZjI5ODk5MDVmMDg4NDE4MGRjZTVhNjdmZTljMDYxZjY3Ni5qcGVn.webp',
          x: 0,
          y: 0
        },

        {
          url: 'https://img.colorhub.me/5tNgQlTNeGU/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vMDUvNGYvYzA4MTA1Yzc3ZWEwOWU1N2IzZTg1NTRlNGNiMTZlMDAxYTY5MDU0Zi5qcGVn.webp',
          x: 0,
          y: 0
        }, {
          url: 'https://cdn.colorhub.me/64ilh6vc2tw/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vOWYvODgvNmZiZmM3YWU5OWIwYmQyNzZmMWM5MWMwMWRiODAxNzU3YzkxOWY4OC5qcGc.webp',
          x: 0,
          y: 0
        },
        {
          url: 'https://cdn.colorhub.me/0pxXm7FwgQU/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vMzIvZWIvMGQ0Y2ZiNzkzMjlmNDI0ZTJlY2U4YTI1MjZkY2Q3ZjZiOGQ4MzJlYi5qcGc.webp',
          x: 0,
          y: 0
        },
        {
          url: 'https://img.colorhub.me/5HEmB2Et7lw/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vNDIvNzUvN2M3MjdmYzFiZDNmN2FhZmFkYzQ5Y2E5MjQ3ZGRjOGEzMzI3NDI3NS5qcGVn.webp',
          x: 0,
          y: 0
        },
        {
          url: 'https://cdn.colorhub.me/Tlr2i3HcNYY/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vN2MvMDkvYmZkYzc3MTk4ZTE1Mjg2ZjVmNTI0OWMwZjNkZjY4YWE4OGZlN2MwOS5qcGVn.webp',
          x: 0,
          y: 0
        },

        {
          url: 'https://cdn.colorhub.me/31EWPPaC3rM/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vMjQvMDUvYzZhMDU1NTdkZDE2NDdiZjJlNzYyNzkzM2U1OWM1OWVjZTFmMjQwNS5qcGVn.webp',
          x: 0,
          y: 0
        },
        {
          url: 'https://cdn.colorhub.me/ojwHoKOthec/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vNmYvNjMvOGJjODJjNjNmMzYyM2M4MWI1NzkwYWY1MWE3Y2Y0YmNhYTAzNmY2My5qcGVn.webp',
          x: 0,
          y: 0
        },
        {
          url: 'https://img.colorhub.me/G3S8lTFEJIQ/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vOGYvMGEvMTlmZjkyNjg1YTMxZDM0MzVjMDdhMGFiMzBhOGU5MzI1YzdlOGYwYS5qcGVn.webp',
          x: 0,
          y: 0
        }, {
          url: 'https://photo.colorhub.me/sYVTa7sM6G4/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vMWQvNDkvMmRiZTFlYmJjODc4MDg3OTIzZTE4MDQxMjg0MmQ3OGVkOTc1MWQ0OS5qcGVn.webp',
          x: 0,
          y: 0
        },
        {
          url: 'https://photo.colorhub.me/v-a0VjH_zy8/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vOTAvNmYvMTVjMTc0MzgzMzllMTg2OGRiOWEzZTQxMDRiZjcwMjM4Y2Q1OTA2Zi5qcGVn.webp',
          x: 0,
          y: 0
        },

        {
          url: 'https://img.colorhub.me/qaEWeUC5c9c/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vN2MvNWQvZjliOTc1YjFjMWI4NmE4MDhiYTYxNjhhM2JmM2UxOTEzMTgyN2M1ZC5qcGVn.webp',
          x: 0,
          y: 0
        },
        {
          url: 'https://photo.colorhub.me/1ejmPjby2d0/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vY2UvNTcvM2Q4Mzg0YTQ3MGU4NzZlNTViNDg0ODFmYzUxYzM1MDU0NTk5Y2U1Ny5qcGc.webp',
          x: 0,
          y: 0
        }, {
          url: 'https://photo.colorhub.me/7AOB0NAaR0M/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vNzAvYWYvNzE1MjNmYTRkYTg3MDUwNzZmNWEwMGQ5ZDU1NTY4NWNhZGVjNzBhZi5qcGVn.webp',
          x: 0,
          y: 0
        },
        {
          url: 'https://cdn.colorhub.me/Qf2HhLXPads/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vNzYvNzMvNWYwZjkyNDczNWVjZjM1NmIxNjllMzE5ZTI5NGZmN2Q4ZDQyNzY3My5qcGVn.webp',
          x: 0,
          y: 0
        },
        {
          url: 'https://img.colorhub.me/_4JZX-83nJ8/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vZjgvZWYvMjUxMjQ4NjYzZDIzYmJhZmRlN2ViZTEwZTgzZDA5ZDA5ZWJiZjhlZi5qcGVn.webp',
          x: 0,
          y: 0
        }, {
          url: 'https://cdn.colorhub.me/uEfq-MyTM2o/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vYzYvOTcvMjJmZDQ3NDdhMTljZTI0NjJjNjQ2Y2ZhY2YyMGZiY2ZhMTUxYzY5Ny5qcGc.webp',
          x: 0,
          y: 0
        },
        {
          url: 'https://cdn.colorhub.me/B4oQ_z1BvJc/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vOTkvNGYvMTA4ZGNlYmVlYWU1YWEyZGVlNzJmNzk5NjgwODAxYTkxZDY0OTk0Zi5qcGVn.webp',
          x: 0,
          y: 0
        },
        {
          url: 'https://img.colorhub.me/8gK5WgsJi_0/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vMjUvNTIvOWFmOWM4Yjg3ZWMxZmU5ODg3Y2UyNzQ3MTQ1NjY0YTNiNWRiMjU1Mi5qcGVn.webp',
          x: 0,
          y: 0
        },
        {
          url: 'https://img.colorhub.me/DAWB9Jj1Ais/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vYjUvZmUvODNlZGY0OTNhZmVhZTRlY2M1OGQ1MDY0YWQzYzJhYzNkYjM2YjVmZS5qcGVn.webp',
          x: 0,
          y: 0
        },
        {
          url: 'https://img.colorhub.me/81plMyBlfqk/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vNzUvMjMvZTg4MzJlZmE3MTFiMWE4M2I3M2VmOWU5YzIyNzFmODAxZDVkNzUyMy5qcGVn.webp',
          x: 0,
          y: 0
        }, {
          url: 'https://cdn.colorhub.me/lDLUT-mvKks/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vZWMvNjkvY2NmMDlkZTc1ZTM3MzMxYTdkNTVhMDZkYjY3MDQxNjY0Y2FkZWM2OS5qcGVn.webp',
          x: 0,
          y: 0
        },


      ],
      dropDownData: [
        {
          url: 'https://photo.colorhub.me/4khg6amuZ9M/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vMzUvN2QvMjdhYjA2MmQzOGJjNmQwZDZmYTY0ZmQ3M2JmMTA5NzdjYjNhMzU3ZC5qcGVn.webp',
          x: 0,
          y: 0
        },
        {
          url: 'https://photo.colorhub.me/s4HBOYxWq90/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vMmEvYWMvMmYyNWJlNWI0YmY5MzM5YzhiOWNkOGM2NzkxMzkwODJhMDFlMmFhYy5qcGVn.webp',
          x: 0,
          y: 0
        }, {
          url: 'https://cdn.colorhub.me/uv4uJAItejI/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vMDMvMTgvYWMwMDg1ODdhYTEzZDViNjI1OTA2OGJhOTg3MDNmNjc2MTMwMDMxOC5qcGVn.webp',
          x: 0,
          y: 0
        },
        {
          url: 'https://cdn.colorhub.me/0pxXm7FwgQU/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vMzIvZWIvMGQ0Y2ZiNzkzMjlmNDI0ZTJlY2U4YTI1MjZkY2Q3ZjZiOGQ4MzJlYi5qcGc.webp',
          x: 0,
          y: 0
        },
        {
          url: 'https://img.colorhub.me/5HEmB2Et7lw/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vNDIvNzUvN2M3MjdmYzFiZDNmN2FhZmFkYzQ5Y2E5MjQ3ZGRjOGEzMzI3NDI3NS5qcGVn.webp',
          x: 0,
          y: 0
        },
        {
          url: 'https://cdn.colorhub.me/Tlr2i3HcNYY/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vN2MvMDkvYmZkYzc3MTk4ZTE1Mjg2ZjVmNTI0OWMwZjNkZjY4YWE4OGZlN2MwOS5qcGVn.webp',
          x: 0,
          y: 0
        },

        {
          url: 'https://cdn.colorhub.me/31EWPPaC3rM/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vMjQvMDUvYzZhMDU1NTdkZDE2NDdiZjJlNzYyNzkzM2U1OWM1OWVjZTFmMjQwNS5qcGVn.webp',
          x: 0,
          y: 0
        },
        {
          url: 'https://cdn.colorhub.me/ojwHoKOthec/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vNmYvNjMvOGJjODJjNjNmMzYyM2M4MWI1NzkwYWY1MWE3Y2Y0YmNhYTAzNmY2My5qcGVn.webp',
          x: 0,
          y: 0
        },
        {
          url: 'https://img.colorhub.me/G3S8lTFEJIQ/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vOGYvMGEvMTlmZjkyNjg1YTMxZDM0MzVjMDdhMGFiMzBhOGU5MzI1YzdlOGYwYS5qcGVn.webp',
          x: 0,
          y: 0
        }, {
          url: 'https://photo.colorhub.me/sYVTa7sM6G4/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vMWQvNDkvMmRiZTFlYmJjODc4MDg3OTIzZTE4MDQxMjg0MmQ3OGVkOTc1MWQ0OS5qcGVn.webp',
          x: 0,
          y: 0
        },
        {
          url: 'https://photo.colorhub.me/v-a0VjH_zy8/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vOTAvNmYvMTVjMTc0MzgzMzllMTg2OGRiOWEzZTQxMDRiZjcwMjM4Y2Q1OTA2Zi5qcGVn.webp',
          x: 0,
          y: 0
        },

        {
          url: 'https://img.colorhub.me/qaEWeUC5c9c/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vN2MvNWQvZjliOTc1YjFjMWI4NmE4MDhiYTYxNjhhM2JmM2UxOTEzMTgyN2M1ZC5qcGVn.webp',
          x: 0,
          y: 0
        },
        {
          url: 'https://photo.colorhub.me/1ejmPjby2d0/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vY2UvNTcvM2Q4Mzg0YTQ3MGU4NzZlNTViNDg0ODFmYzUxYzM1MDU0NTk5Y2U1Ny5qcGc.webp',
          x: 0,
          y: 0
        }, {
          url: 'https://photo.colorhub.me/7AOB0NAaR0M/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vNzAvYWYvNzE1MjNmYTRkYTg3MDUwNzZmNWEwMGQ5ZDU1NTY4NWNhZGVjNzBhZi5qcGVn.webp',
          x: 0,
          y: 0
        },
        {
          url: 'https://cdn.colorhub.me/Qf2HhLXPads/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vNzYvNzMvNWYwZjkyNDczNWVjZjM1NmIxNjllMzE5ZTI5NGZmN2Q4ZDQyNzY3My5qcGVn.webp',
          x: 0,
          y: 0
        },
        {
          url: 'https://img.colorhub.me/_4JZX-83nJ8/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vZjgvZWYvMjUxMjQ4NjYzZDIzYmJhZmRlN2ViZTEwZTgzZDA5ZDA5ZWJiZjhlZi5qcGVn.webp',
          x: 0,
          y: 0
        }, {
          url: 'https://cdn.colorhub.me/uEfq-MyTM2o/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vYzYvOTcvMjJmZDQ3NDdhMTljZTI0NjJjNjQ2Y2ZhY2YyMGZiY2ZhMTUxYzY5Ny5qcGc.webp',
          x: 0,
          y: 0
        },
        {
          url: 'https://cdn.colorhub.me/luBXTEKH8FM/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vMWEvNGEvMDc3Mjk3MjEyNzUxYmJkNTZjZTE3MTk1YWIwYTlmOWRiYWFmMWE0YS5qcGVn.webp',
          x: 0,
          y: 0
        },
        {
          url: 'https://img.colorhub.me/8gK5WgsJi_0/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vMjUvNTIvOWFmOWM4Yjg3ZWMxZmU5ODg3Y2UyNzQ3MTQ1NjY0YTNiNWRiMjU1Mi5qcGVn.webp',
          x: 0,
          y: 0
        },
        {
          url: 'https://img.colorhub.me/DAWB9Jj1Ais/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vYjUvZmUvODNlZGY0OTNhZmVhZTRlY2M1OGQ1MDY0YWQzYzJhYzNkYjM2YjVmZS5qcGVn.webp',
          x: 0,
          y: 0
        },
        {
          url: 'https://img.colorhub.me/81plMyBlfqk/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vNzUvMjMvZTg4MzJlZmE3MTFiMWE4M2I3M2VmOWU5YzIyNzFmODAxZDVkNzUyMy5qcGVn.webp',
          x: 0,
          y: 0
        }, {
          url: 'https://cdn.colorhub.me/lDLUT-mvKks/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vZWMvNjkvY2NmMDlkZTc1ZTM3MzMxYTdkNTVhMDZkYjY3MDQxNjY0Y2FkZWM2OS5qcGVn.webp',
          x: 0,
          y: 0
        },

      ],
    }
  },
  async mounted() {
    await this.getColumnNums()
    await this.calcData(this.list)
    window.addEventListener('resize', this.handleResize);
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    // 在组件销毁前移除事件监听，避免内存泄漏
    window.removeEventListener('resize', this.handleResize);
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    //窗口改变重新计算
    async handleResize() {
      await this.getColumnNums()
      await this.newCalc()
    },
    //触底加载更多
    async handleScroll() {
      if (this.loadMore) return
      const scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop;
      const clientHeight =
          document.documentElement.clientHeight || document.body.clientHeight;
      const scrollHeight =
          document.documentElement.scrollHeight || document.body.scrollHeight;
      if (scrollTop + clientHeight + 10 >= scrollHeight) {
        this.loadMore = true
        await this.newAddCalc(this.dropDownData)
      }
    },
    async newAddCalc(list) {
      for (let i = 0; i < list.length; i++) {
        this.list.push(await this.newGetImgInfo(list[i], i))
      }
    },
    newGetImgInfo(item, idx) {
      let that = this
      return new Promise((resolve, reject) => {
        let img = new Image()
        img.src = item.url
        img.onload = function () {
          //渲染后的高度
          let renderHeight = ((that.width - 10) / this.width * this.height) + 10
          let {value, index} = that.findMinItemAndIndex(that.columns)
          item.x = index * that.width


          item.y = value
          that.columns[index] += renderHeight
          item.renderHeight = renderHeight
          resolve(item)
        }
      });
    },
    newCalc() {
      this.list.map((item, idx) => {
        if (idx < this.columnNums) {
          item.y = 0
          item.x = idx * this.width
          this.columns[idx] = item.renderHeight
        } else {
          let {value, index} = this.findMinItemAndIndex(this.columns)
          item.x = index * this.width


          item.y = value
          this.columns[index] += item.renderHeight
        }
      })
    },
    async calcData(list) {
      for (let i = 0; i < list.length; i++) {
        await this.getImgInfo(list[i], i)
      }
    },
    //获取图片的高度
    getImgInfo(item, idx) {
      let that = this
      return new Promise((resolve, reject) => {
        let img = new Image()
        img.src = item.url
        img.onload = function () {
          //渲染后的高度
          let renderHeight = ((that.width - 10) / this.width * this.height) + 10
          if (idx < that.columnNums) {
            item.y = 0
            item.x = idx * that.width
            that.columns[idx] = renderHeight
          } else {
            let {value, index} = that.findMinItemAndIndex(that.columns)
            item.x = index * that.width

            item.y = value
            that.columns[index] += renderHeight
          }
          item.renderHeight = renderHeight
          resolve()
        }
      });
    },
    //获取一共可以展示几列
    getColumnNums() {
      this.$nextTick(() => {
        this.columns = []
        let {width} = this.$refs.waterfallFlow.getBoundingClientRect()
        this.columnNums = ~~Number((width / this.width))
        for (let i = 0; i < this.columnNums; i++) {
          this.columns.push(0)
        }
      })
    },
    //获取数组中最小的那一项和下标
    findMinItemAndIndex(arr) {
      let min = arr[0];
      let minIndex = 0;
      for (let i = 1; i < arr.length; i++) {
        if (arr[i] < min) {
          min = arr[i];
          minIndex = i;
        }
      }
      return {value: min, index: minIndex};
    }
  },
}
</script>

<style lang="scss" scoped>
.waterfallFlow-wrapper {
  position: relative;

  .waterfallFlow-item {
    position: absolute;
    left: 0;
    top: 0;
    padding: 5px;
    box-sizing: border-box;
    transition: .3s linear;
  }
}
</style>

满天星cx
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
10-15
主要介绍了vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多,本文分步骤通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
H5移动端vue-masonry + van-list实现瀑布流懒加载效果
最新发布
tangpinger的博客
08-06 814
【代码】H5移动端vue-masonry + van-list实现瀑布流懒加载效果。
vue实现瀑布流
qq_43046897的博客
10-18 1172
最近项目要加一个瀑布流的页面，像这样： 一开始我想着直接写一个容器，容器的css属性加上column-width: 50%;和column-count: 2;为了避免在主体框中插入任何中断，需要向容器内子元素的css加上一个break-inside: avoid;但是这种写法有一个问题就是排列顺序是左边显示前一半，右边显示后一半，像这样： 而我需要的是那种每条数据根据左右区域的高度来判断这条数...
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解).docx
01-21
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解).docx
Vue等高瀑布流+下拉加载数据+点击图片放大查看（pc端）
qq_40788898的博客
09-27 5093
需求：等高瀑布流+下拉加载+点击图片放大 老板发布一个需求，需要做一个等高瀑布流图片展示， What？这么简单，还不是随随便便弄个插件就好了，在试过vue-waterfall、vue-waterfall-easy、vue-waterfall2后，我发现多多少少不能迎合需求，所以决定自己手写。 =====================================================> 下面代码：（小伙伴们根据自己需求提取，也可以使用插件，毕竟方便，注意我的是等高瀑布流不是等宽！） HT
vue实现瀑布流组件滑动加载更多
10-15
主要为大家详细介绍了vue实现瀑布流组件滑动加载更多，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
uniapp vue瀑布流自定义控件资源包
06-12
2. **上拉加载（Infinite Loading）**：当用户滚动到底部时，自动触发加载更多数据的功能，提升用户体验，减少手动刷新的操作。 3. **下拉刷新（Pull to Refresh）**：用户可以通过下拉页面的方式，轻松刷新当前显示...
vue中实现瀑布流
HYeeee的博客
12-25 5056
瀑布流的参考实现可以看这篇博客：3种方式实现瀑布流布局 1、利用css实现瀑布流 /** flex布局实现 */ .box { display: flex; align-items: center; flex-flow:column wrap; height: 100vh; // 为啥要设置100vh才有效果 } .item { border: 1px solid #5592e5; margin: 10px; width: calc(100%/3 - 20p
瀑布流效果 滚动到底部加载更多
12-21
JS,JQ瀑布流效果 滚动到底部加载更多 非常实用的代码 前端必备
vue瀑布流组件滑动加载更多
本杰明的博客
07-18 1万+
建议先看上一篇再来食用本文，如果直接想看源码文末就是~上一篇讲到在项目中使用上拉加载更多组件，但是由于实际项目开发中由于需求变更或者说在webview中上拉加载有些机型在上拉时候会把webview也一起上拉导致上拉加载不灵敏等问题，我们有时候也会换成滑动到底部自动加载的功能。既然都是加载更多，很多代码思想势必相似，主要区别在于上拉和滑动到底部这个操作上，所以，我们需要注意： 上拉加载是point指针
vue瀑布流组件上拉加载更多
本杰明的博客
07-18 7658
最近在做移动端h5页面，所以分页什么的就不能按照传统pc端的分页器的思维去做了，这么小的屏幕去点击也不太方便一般来讲移动端都是上拉加载更多，符合正常使用习惯。首先简单写一下模板部分的html代码,，很简单清晰的逻辑：<template> <div class="loadmore"> <div class="loadmore__body"> <slot></slot>
超级简单的瀑布流加载数据
花神的博客
03-21 1万+
瀑布流是我们经常用到的加载方式，对于大量数据加载优化效果十分明显，这里我使用非常简单的代码来实现瀑布流，需要的朋友尽管copy：<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"/> <meta name="aplus-terminal" content="1"> <meta na
vue底部加载更多
xidongdong1的博客
12-10 1万+
要实现的效果如下： class="newsList"> v-for="(items, index) in newsList"> class="date">{{showDay(index)}} class="list" > class="list-item" v-for="item in items">
vue.js实现瀑布流之vue-waterfall-easy
weixin_30747253的博客
08-22 649
想必大家应该很多都已经习惯了jquery的DOM操作，jquery的瀑布流实现起来也很容易。 但是，随着时代的发展，随着时代的进步..... 算了算了，扯远了，既然能找到这儿来，肯定是在vue.js上已经有一定的基础了，咱们废话不多说，直接进入主题。 转载请注明出处：http://www.cnblogs.com/meng1314-shuai/p/7407055.html！！！！！ 那些复...
vue.js 结合 vue-waterfall-easy 实现瀑布流 + 下拉刷新
小白阿里里的博客
10-15 7196
vue.js 结合 vue-waterfall-easy 实现瀑布流 + 下拉刷新 最近的项目需求首先页面展示是需要瀑布流的，然后还要有下拉刷新功能，我本以为通过 vue-waterfall-easy 实现了瀑布流后再使用其他 ui 库中的下拉刷新就能轻而易举的实现该效果，但事实并非如此，在尝试了多种方法未果后，终于得出了结果，下面进入主题： 首先我在尝试两个组件合并失败的时候重新去阅读了文档，才...
vue中实现滚动加载更多
热门推荐
土家稀哥
06-09 3万+
在以前的前端刀耕火种时代要实现滚动加载更多想要大家都是很快实现了，在vue会有一点麻烦，最近自己研究了一下，做了一个简单的demo，供大家参考： {{item.title}} import axios from
jquery实现瀑布流效果＋下拉加载新数据
小白变怪兽
12-07 8590
瀑布流 下拉加载 下拉加载数据 数据 jquery 模版
Vue 瀑布流布局+触底加载下一页（原生）
Hillbox
10-10 1万+
效果 思路 1、html中建立四个“管道” 2、后台获取到数据 3、遍历数据，获取高度最小的管道，填入数据 4、滚动条到底时触发函数，获取下一页数据，然后再执行步骤3 参考 jquery实现滑动到底部加载下一页的数据 代码 template：建立四个piping，ref参数是为了在js中获取dom元素。 <template> <div clas...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值