🔥使用vue从零开始手写一个猫咪瀑布流组件(支持ssr)

//imgsArr是组件外部传入的一个图片数组 里面有一个src表示图片的路径
this.imgsArr.forEach((imgItem, imgIndex) => {
    //...
    //...
})
复制代码

//声明loadedCount变量记录加载完毕的数量，为了和imgsArr大小作比较，通知加载完毕（包括无图、加载完毕，加载失败的情况）
data(){
    return {
        loadedCount: 0
    }
}
复制代码

// 无图时 将高度记录为0
if (!imgItem[this.srcKey]) {
    this.imgsArr[imgIndex]._height = "0";
    this.loadedCount++;
    // 支持无图模式
    if (this.loadedCount == this.imgsArr.length) {
        this.$emit("preloaded");
    }
    return;
}
复制代码

//使用Image API 当src属性改变并完成加载时执行
let oImg = new Image();
oImg.src = imgItem[this.srcKey];
oImg.onload = oImg.onerror = (e) => {
    //...
}
复制代码

//理论上 预加载图片的高度/预加载图片的宽度=需要渲染图片的高度/图片宽度
this.imgsArr[imgIndex]._height =
            e.type == "load"
              ? Math.round(this.imgWidth_c * (oImg.height / oImg.width))
              : this.imgWidth_c;  
复制代码

if (e.type == "error") {
    this.imgsArr[imgIndex]._error = true;
    this.$emit("imgError", this.imgsArr[imgIndex]);
} 
复制代码

if (this.loadedCount === this.imgsArr.length) { 
    this.$emit("preloaded");
}
复制代码

calcuCols() {
    // 需要计算出渲染多少列数据
    let waterfallWidth = this.width ? this.width : window.innerWidth;
    //最少渲染一列
    let cols = Math.max(parseInt(waterfallWidth / this.colWidth),1); 
    //最大不能超过maxCols列
    return this.isMobile ? 2 : Math.min(cols,this.maxCols;
}
复制代码

//当加载完以后 页面开始进行渲染 imgsArr_c 为真实渲染数组
this.$emit("preloaded");

this.$on("preloaded", () => { 
    this.imgsArr_c = this.imgsArr.concat([]); // 预加载完成，这时才开始渲染
    // ...
});
复制代码

this.$nextTick(() => {
    //表示欲加载结束
    this.isPreloading = false;
    this.waterfall();
});
复制代码

waterfall() {
    //选择所有图片
    this.imgBoxEls = this.$el.getElementsByClassName("img-box");
    //如果一个都没有则没有东西可以排列 故直接返回
    if (!this.imgBoxEls) return;
    //声明top、left、height、colwidth即列的宽度
    let top,
        left,
        height,
        colWidth = this.isMobile
          ? this.imgBoxEls[0].offsetWidth
          : this.colWidth;
    //开始排列的坐标大小 如果是从0开始排列 则将colsHeightArr置空，colsHeightArr的作用是用来比较 当前排列图片中哪个最小
    if (this.beginIndex == 0) this.colsHeightArr = [];
    //从0开始排列
    for (let i = this.beginIndex; i < this.imgsArr.length; i++) {
        if (!this.imgBoxEls[i]) return;
        //获取渲染元素的高度
        height = this.imgBoxEls[i].offsetHeight;
        if (i < this.cols) {
            //如果小于列数 则将第一排的几个元素全部push进数组里面 将top置为0 left为列坐标乘以列的宽度
            this.colsHeightArr.push(height);
            top = 0;
            left = i * colWidth;
        } else {
            //当第一行排列完以后 算出当前最小的高度
            let minHeight = Math.min.apply(null, this.colsHeightArr); // 最低高低
            //当第一行排列完以后 算出当前最小的索引
            let minIndex = this.colsHeightArr.indexOf(minHeight); // 最低高度的索
            //新元素的top值即为数组中最小的值
            top = minHeight;
            //左边的值即为最小索引乘以列宽
            left = minIndex * colWidth;
            // 设置元素定位的位置
            // 更新colsHeightArr
            this.colsHeightArr[minIndex] = minHeight + height;
        }
        //设置单个元素的left、top值
        this.imgBoxEls[i].style.left = left + "px";
        this.imgBoxEls[i].style.top = top + "px";
      }
      this.beginIndex = this.imgsArr.length; // 排列完之后，新增图片从这个索引开始预加载图片和排列
}
复制代码

window.addEventListener("resize", this.response);

response: function () {
      let old = this.cols;
      //重新计算列数
      this.cols = this.calcuCols();
      //如果列数不变 则不需要重新排列
      if (old === this.cols) return; // 列数不变直接退出
      this.beginIndex = 0; // 开始排列的元素索引
      this.waterfall();
}
复制代码

this.scroll();

scroll() {
      this.$refs.scrollEl.addEventListener("scroll", this.scrollFn);
}

scrollFn() {
      let scrollEl = this.$refs.scrollEl;
      //如果正在预加载
      if (this.isPreloading) return;
      let minHeight = Math.min.apply(null, this.colsHeightArr);
      if (
        scrollEl.scrollTop + scrollEl.offsetHeight >
        minHeight - this.reachBottomDistance
      ) {
        this.isPreloading = true;
        this.$emit("scrollReachBottom");
      }
}
复制代码

npm install @parrotjs/vue-waterfall -S
复制代码