基于vue的固定宽度图片瀑布流组件

巧克力味。

已于 2022-10-13 16:57:49 修改

阅读量319

点赞数

分类专栏： vue实用组件文章标签： javascript vue.js 前端

于 2022-10-13 16:49:45 首次发布

本文链接：https://blog.csdn.net/s00890161/article/details/127304528

版权

vue实用组件专栏收录该内容

4 篇文章 0 订阅

订阅专栏

基于vue的固定宽度图片瀑布流组件

<!-- 
 @Description: pictureList 图库列表组件
 @Author: sunyongwei
 @Date: 2022-10-12
 @Version: V1.0
 -->
<template>
  <div style="margin: 20px;">
   <div style="width: 100%;">
      <div>
        <div style="font-weight: bold;font-size: 16px;">
          <span v-for="(item,index) in fullTitle">{{item}}
             <span v-if="index<fullTitle.length-1">/</span>
          </span>
        </div>
        <div style="font-size: 10px;color: #767676;">{{list.length}}个文件，共{{(sizeTotle / 1024 / 1024).toFixed(3)}}GB</div>
      </div>
   </div>
   <div id="img-content" class="img-content">
      <img
          class="img"
          :style="'width:' + imgWidth + 'px;'"
          v-for="(item, index) in list"
          :key="'img' + index"
          :src="item.url"
      />
    </div>
  </div>
</template>

<script>
  export default {
    name: 'pictureList',
    props:{
      list:{ //图片列表
        type:Array,
        default() {
          return []
        }
      },
      fullTitle:{ //全节点名称
        type:Array,
        default() {
          return ''
        }
      },
      imgWidth: {
        type: Number,
        default: 100
      },
      imgMargin: {
        type: Number,
        default: 3
      },
      
    },
    data () {
      return {
        pictureList:[],
        screenWidth:1000,
        sizeTotle:0
      }
    },
    watch:{
      list(){
        this.sizeTotle = 0
        this.list.forEach(e=>{
          this.sizeTotle += e.size
        })
      },
    },
    mounted() {
      this.screenWidth = document.body.clientWidth;
      window.onresize = () => {
        return (() => {
          this.screenWidth = document.body.clientWidth;
          this.waterfallHandler()
        })();
      };
    },
    created() {
      let that = this
      setTimeout(function(){
        that.waterfallHandler()
      },200)
      this.list.forEach(e=>{
        this.sizeTotle += e.size
      })
    },
    methods: {
       waterfallHandler() {
          const imgWidth = this.imgWidth + this.imgMargin * 2;
          const contentW = this.screenWidth - 500;
          // 获取图片的列数
          const column = parseInt(contentW / imgWidth);
          // 高度数组
          const heightArr = new Array(column).fill(0);
          const imgList = document.getElementsByClassName("img");
          for (let i = 0; i < imgList.length; i++) {
              const item = imgList[i];
              // 当前元素的高度
              const itemHeight = item.offsetHeight;
              // 高度数组最小的高度
              const minHeight = Math.min(...heightArr);
              // 高度数组最小的高度的索引
              const minIndex = heightArr.indexOf(minHeight);
              item.style.top = minHeight+i+this.imgMargin + "px";
              item.style.left = minIndex * imgWidth + "px";
              heightArr[minIndex] += itemHeight;
          }
      }
    }
  }
</script>

<style scoped >
   .img-content {
       height: 1200px;
       position: relative;
       margin: 8px 0px;
   }
   .img {
       position: absolute;
       vertical-align: top;
       margin: 3px;
   }
  
</style>