vue 瀑布流实现

 - 这个福宝有点懒哦 - 
          
 
             

            
            

            
            

              

                

                  

                  
{{item.title}} 
{{item.likes}}
                
              
            
          

　　

export defalut{
     data(){
        return {
         leftHeight: 0,
          rightHeight: 0
        }
    }, 
      methods:{
       // 瀑布流
        // 瀑布流
    waterfalls () {
      const _this = this
            setTimeout(() => {
              this.list.forEach((v, index) => {
                let val = _this.$refs.items.children[0]

　　　　　　　　　　if(!val) return

                let $img = val.children[0].children[0].children[0]
                if ($img.complete) {
                  _this.$refs.items.removeChild(val)
                  _this.addItems(val);
                } else {
                  _this.addItems(val)
                }
              })
            })
    },
    addItems (val) {
      const $l = this.$refs.waterfallsLeft,
            $r = this.$refs.waterfallsRight,
            _this = this
      if(_this.leftHeight <= _this.rightHeight){
          $l.appendChild(val)
          _this.leftHeight = $l.offsetHeight
        }else{
          $r.appendChild(val)
          _this.rightHeight = $r.offsetHeight
        }
    },
    //请求放产品的列表回调成功的里填上
   this.list=success.data.list
    this.$nextTick(function () {
              this.waterfalls()
            })
    } 
}    

　　

转载于:https://www.cnblogs.com/zhoubingyan/p/8413887.html