js实现动态加载数据瀑布流_javascript技巧_

; (function (doc) {   // console.log('list', list);   var Wapper = function (op) {     this.el = doc.getElementById(op.el)     this.el_itemClassName = op.el_itemClassName     this.colum = op.colum     this.gap = op.gap     // 1.首先获取到每个照片外层盒子 也就是wr_item 的宽度     this.wr_item_w = (this.el.offsetWidth - (this.colum - 1) * this.gap) / this.colum     this.pageNum = 0     this.hightArr = []     this.pageSize = 4   }   Wapper.prototype = {     init() {       this.bindEvetn()       this.getData()     },     getData() {       // 这里默认一次获取30个照片 ，我这里了是假数据所以就不做别的了       // 一般这里是向后端请求数据       // list一共是有120       const partList = getPartList(this.pageNum)       if (partList) {         this.render(partList)         return true       } else {         return false       }     },     render(partList) {       // 只有数据存在才进行下面的操作       if (partList) {         partList.forEach((li, index) => {           const o_item = document.createElement('div')           // 这里要给o_item设置高度           // 不要想着用img撑开，这样做会导致不能够获取到o_item的offsetWidth           // 注意dom添加一个节点后，你是不能马上获取到其一些宽高的，           // 所以后端在返回数据的时候要给出高度           const imgW = li.width           const imgH = li.height           o_item.style.width = this.wr_item_w + 'px'           // 高度等于 盒子宽度x图片高度/图片宽度           const oitemH = (this.wr_item_w * imgH) / imgW           o_item.style.height = oitemH + 'px'           o_item.className = this.el_itemClassName           const img = new Image()           img.src = li.thumbURL           // 注意这里好像不能直接设置透明度，最好加个定时器触发重绘           // img.style.opacity = '1'           o_item.appendChild(img)           this.el.appendChild(o_item)           // 设置第一行            // 必须是第一页的数据           if (index < this.colum && this.pageNum === 0) {             this.hightArr.push(o_item.offsetHeight)             o_item.style.top = '0'             if (index + 1 % this.colum === 0) {               // 说明这是第一个               o_item.style.left = '0'             } else {               o_item.style.left = index * (this.wr_item_w + this.gap) + 'px'             }           } else {             const items = this.el.getElementsByClassName(this.el_itemClassName)             const minIndex = getMinIdx(this.hightArr)             const c_item = items[minIndex]             o_item.style.left = c_item.offsetLeft + 'px'             o_item.style.top = this.hightArr[minIndex] + this.gap + 'px'             this.hightArr[minIndex] += (o_item.offsetHeight + this.gap)           }           img.style.opacity = '1'         })         console.log('this.hightArr', this.hightArr);         this.el.style.height = this.hightArr[getMaxIdx(this.hightArr)] + 'px'       }     },     bindEvetn() {       var that = this       window.onscroll = function () {           if (getWindowHeight() + getScrollTop() === getHtmlScrollHeight()) {           console.log(that.pageNum);           that.pageNum++;           let hasNext = that.getData()           hasNext || that.pageNum--         }       }     }   }   function getPartList(pageNum) {     switch (pageNum) {       case 0:         return list.slice(0, 30)         break;       case 1:         return list.slice(30, 60)       case 2:         return list.slice(60, 90)       case 3:         return list.slice(90, 120)       default:         return null     }   }   // 找最小下标   function getMinIdx(arr) {     const minHeight = Math.min.apply(null, arr)     return [].indexOf.call(arr, minHeight)   }   // 找最大   function getMaxIdx(arr) {     const maxHeight = Math.max.apply(null, arr)     return [].indexOf.call(arr, maxHeight)   }   window.Wapper = Wapper })(document)