js瀑布流-网页编程网

当前位置：主页 >> DIV+CSS >> 正文

js瀑布流

阅读：4192 输入：2020-07-22 19:39:01

this.init();
      // offset  client
    }

init(){
      this.render();
    }

render(){
      var item ,
          itemLen = this.oItems.length,
          minIdx;
       
      for(var i = 0; i < itemLen; i++){
        item = this.oItems[i];
        item.style.width = this.itemWidth + 'px';
        
        if(i < this.column){
          this.heightArr.push(item.offsetHeight);
          item.style.top = 0;

if( (i + 1) % this.column  === 1 ){
             item.style.left = '0';
          }else{
            item.style.left = i * (this.itemWidth + this.gap) + 'px';
          }

}else{
          minIdx =  this._getMinIdx(this.heightArr);
          item.style.left = this.oItems[minIdx].offsetLeft + 'px';
          item.style.top = (this.heightArr[minIdx] + this.gap) + 'px';
          this.heightArr[minIdx] += item.offsetHeight + this.gap;
        }
      }
    }

_getMinIdx(arr){
      return [].indexOf.call(arr, Math.min(...arr))
    }
  }
  window.Waterfall = Waterfall;
})();
</script>
<style>
.wrapper{
  position: relative;
  width: 1200px;
  border: 1px solid #000;
  margin: 0 auto;
}

.wf-item{
  position: absolute;
  box-shadow:  1px 2px 3px #ccc;
}
.wf-item:hover{
  box-shadow:  3px 5px 8px #ccc;
}

.wf-item .wf-img{
  width: 100%;
  height: 100%;
}
</style>
</head>
<body>
   <div class="wrapper J_waterfall">
     <div class="wf-item"><img src="img/1.jpg" alt="" class="wf-img"></div>
     <div class="wf-item"><img src="img/2.jpg" alt="" class="wf-img"></div>
     <div class="wf-item"><img src="img/3.jpg" alt="" class="wf-img"></div>
     <div class="wf-item"><img src="img/4.jpg" alt="" class="wf-img"></div>
     <div class="wf-item"><img src="img/5.jpg" alt="" class="wf-img"></div>
     <div class="wf-item"><img src="img/6.jpg" alt="" class="wf-img"></div>
     <div class="wf-item"><img src="img/7.jpg" alt="" class="wf-img"></div>
     <div class="wf-item"><img src="img/8.jpg" alt="" class="wf-img"></div>
     <div class="wf-item"><img src="img/9.jpg" alt="" class="wf-img"></div>
     <div class="wf-item"><img src="img/10.jpg" alt="" class="wf-img"></div>
     <div class="wf-item"><img src="img/11.jpg" alt="" class="wf-img"></div>
     <div class="wf-item"><img src="img/12.jpg" alt="" class="wf-img"></div>
     <div class="wf-item"><img src="img/13.jpg" alt="" class="wf-img"></div>
     <div class="wf-item"><img src="img/14.jpg" alt="" class="wf-img"></div>
     <div class="wf-item"><img src="img/15.jpg" alt="" class="wf-img"></div>
     <div class="wf-item"><img src="img/16.jpg" alt="" class="wf-img"></div>
     <div class="wf-item"><img src="img/17.jpg" alt="" class="wf-img"></div>
     <div class="wf-item"><img src="img/18.jpg" alt="" class="wf-img"></div>
     <div class="wf-item"><img src="img/19.jpg" alt="" class="wf-img"></div>
     <div class="wf-item"><img src="img/20.jpg" alt="" class="wf-img"></div>
     <div class="wf-item"><img src="img/21.jpg" alt="" class="wf-img"></div>
     <div class="wf-item"><img src="img/22.jpg" alt="" class="wf-img"></div>
     <div class="wf-item"><img src="img/23.jpg" alt="" class="wf-img"></div>
     <div class="wf-item"><img src="img/24.jpg" alt="" class="wf-img"></div>
     <div class="wf-item"><img src="img/25.jpg" alt="" class="wf-img"></div>
     <div class="wf-item"><img src="img/26.jpg" alt="" class="wf-img"></div>
     <div class="wf-item"><img src="img/27.jpg" alt="" class="wf-img"></div>
     <div class="wf-item"><img src="img/28.jpg" alt="" class="wf-img"></div>
     <div class="wf-item"><img src="img/29.jpg" alt="" class="wf-img"></div>
     <div class="wf-item"><img src="img/30.jpg" alt="" class="wf-img"></div>
     <div class="wf-item"><img src="img/31.jpg" alt="" class="wf-img"></div>
     <div class="wf-item"><img src="img/32.jpg" alt="" class="wf-img"></div>
     <div class="wf-item"><img src="img/33.jpg" alt="" class="wf-img"></div>
     <div class="wf-item"><img src="img/34.jpg" alt="" class="wf-img"></div>
     <div class="wf-item"><img src="img/35.jpg" alt="" class="wf-img"></div>
     <div class="wf-item"><img src="img/36.jpg" alt="" class="wf-img"></div>
     <div class="wf-item"><img src="img/37.jpg" alt="" class="wf-img"></div>
     <div class="wf-item"><img src="img/38.jpg" alt="" class="wf-img"></div>
     <div class="wf-item"><img src="img/39.jpg" alt="" class="wf-img"></div>
     <div class="wf-item"><img src="img/40.jpg" alt="" class="wf-img"></div>
   </div>
  <script >
     new Waterfall({
       el: 'J_waterfall',
       column: 6,
       gap: 10
     })
  </script>
</body>

上一篇：python中如何请求session鉴权和token鉴权的接口
下一篇：css3用伪元素实现加载引导动画

相关阅读: js实现弹出层居中显示背景变灰效果; JS/CSS 在屏幕底部弹出消息; 提醒操作窗口，背景变暗渐变