//數(shù)據(jù)請(qǐng)求
getDataList(){
 this.$axios.get("/json/dataList.json").then((res)=>{

  let list = res.data.data ? res.data.data: [];
  if (list.length > 0){
  //從list中取pageSize條數(shù)據(jù)出來(lái)
  var tempList = [];
  for (let i = 0; i < this.pageSize; i++){
   if (list.length > 0){
   let tempIndex = parseInt(Math.random() * 1000) % list.length;
   tempList.push(list[tempIndex]);
   list.splice(tempIndex, 1);
   }
  }
  this.loadImagesHeight(tempList); //模擬預(yù)加載圖片，獲取圖片高度
  }
  else {
  this.loadImagesHeight(list); 
  }
 }).catch((res)=>{
  console.log("..fail: ", res);
  this.$toast.clear();
  this.isLoading = false; //下拉刷新請(qǐng)求完成
  this.loading = false; //上拉加載更多請(qǐng)求完成
 })
},

loadImagesHeight(list){
  var count = 0; //用來(lái)計(jì)數(shù)，表示是否所有圖片高度已經(jīng)獲取
  list.forEach((item, index)=>{
   //創(chuàng)建圖片對(duì)象，加載圖片，計(jì)算圖片高度
   var img = new Image();
   img.src = item.cover;
   img.onload = img.onerror = (e)=>{
   count++;
   if (e.type == 'load'){ //圖片加載成功
    //計(jì)算圖片縮放后的高度：圖片原高度/原寬度 = 縮放后高度/縮放后寬度
    list[index].imgHeight = Math.round(img.height * this.boxWidth / img.width);
    // console.log('index: ', index, ', load suc, imgHeiht: ', list[index].imgHeight);
   }
   else{ //圖片加載失敗，給一個(gè)默認(rèn)高度50
    list[index].imgHeight = 50;
    console.log("index： ", index, "， 加載報(bào)錯(cuò)：", e);
   }

   //加載完成最后一個(gè)圖片高度，開(kāi)始下一步數(shù)據(jù)處理
   if (count == list.length){
    this.resolveDataList(list);
   }
   }
  })
},

resolveDataList(list){ //處理數(shù)據(jù)
  //下拉刷新，清空原數(shù)據(jù)
  if (this.pageIndex <= 1){
   this.itemCount = 0;
   this.dataList = [];
   this.lastRowHeights = [0, 0]; //存儲(chǔ)每列的最后一行高度清0
  }
  if (list.length >= this.pageSize){
   this.pageIndex++; //還有下一頁(yè)
  }
  else{
   this.finished = true; //當(dāng)前tab類型下所有數(shù)據(jù)已經(jīng)加載完成
  }
  //合并新老兩個(gè)數(shù)組數(shù)據(jù)
  this.dataList = [...this.dataList, ...list];
  //判斷頁(yè)面是否有數(shù)據(jù)
  this.haveData = this.dataList.length > 0 ? 2 : 1;
  this.isLoading = false; //下拉刷新請(qǐng)求完成
  this.loading = false; //上拉加載更多請(qǐng)求完成
  console.log("...datalist: ", this.dataList);
  console.log("...this.isLoading: ", this.isLoading)
  this.$nextTick(()=>{
   setTimeout(()=>{
   //渲染完成，計(jì)算每個(gè)item寬高，設(shè)置標(biāo)簽坐標(biāo)定位
   this.setItemElementPosition();
   this.isLoading = false; //下拉刷新請(qǐng)求完成
   this.loading = false; //上拉加載更多請(qǐng)求完成
   }, 1000)
  });
  },
  //獲取每個(gè)item標(biāo)簽高度，設(shè)置item的定位
  setItemElementPosition(){
  let parentEle = document.getElementById('data-list-box');
  let boxEles = parentEle.getElementsByClassName("data-item");
  for (let i = this.itemCount; i < boxEles.length; i++){
   let tempEle = boxEles[i];
   //上一個(gè)標(biāo)簽最小高度的列索引
   let curColIndex = this.getMinHeightIndex(this.lastRowHeights);
   let boxTop = this.lastRowHeights[curColIndex] + this.boxMargin;
   let boxLeft = curColIndex * (this.boxWidth + this.boxMargin) + this.boxMargin;
   tempEle.style.left = boxLeft + 'px';
   tempEle.style.top = boxTop + 'px';
   this.lastRowHeights[curColIndex] = boxTop + tempEle.offsetHeight;
   // console.log('i = ', i, ', boxTop: ', boxTop, ', eleHeight: ', tempEle.offsetHeight);
  }
  this.itemCount = boxEles.length;
  //修改父級(jí)標(biāo)簽的高度
  let maxHeight = Math.max.apply(null, this.lastRowHeights);
  parentEle.style.height = maxHeight + 'px';
  this.$toast.clear();
  console.log("...boxEles: ", boxEles.length, ", maxH: ", maxHeight);
  },