js实现瀑布流布局(无限加载)

本文实例为大家分享了js实现瀑布流布局的具体代码，供大家参考，具体内容如下

1.实现瀑布流布局思路

准备好数据之后

. 绑定滚动事件
. 判断页面是否到底（滚动的距离+可是区域的高度 == 最后一个元素的top）
. 加载新数据，渲染新页面
.重新执行瀑布流效果

2.代码（更换图片路径之后可直接运行）

!DOCTYPE htML>
    html>
    head>
     meta charset="UTF-8">
     tITle>
    Document/title>
     style>
 .cont{
    margin: 0 auto;
    background: #ccc;
    position: relative;
}
 .cont::after{
    content: "";
    display: block;
    clear: both;
}
 .box{
    float: left;
    padding: 6px;
}
 .imgbox{
    border: solid 1px black;
    padding: 6px;
    border-radius: 6px;
}
  .imgbox img{
    width: 200px;
    display: block;
}
     /style>
     script src="data/data.js">
    /script>
     script>
 // W1. 准备数据 // W2. 绑定滚动事件  // W3. 判断页面是否到底（滚动的距离+可是区域的高度 == 最后一个元素的top）  // W4. 加载新数据，渲染新页面  // W5. 重新执行瀑布流效果 onload = function(){
      new Waterfall;
 }
 class Waterfall{
  constructor(){
      // 1.选择元素  this.box = document.querySelectorAll(".box");
      this.cont = document.querySelector(".cont");
      this.clientH = document.documentElement.clientHeight;
      this.heightArr = [];
      // 2.补全布局  this.init();
      this.addEvent();
  }
  addEvent(){
      VAR that = this;
  onscroll = function(){
       var scrollT = document.documentElement.scrollTop;
       if(that.clientH + scrollT >
 that.scrollH-300){
   that.render()   }
  }
  }
  render(){
      for(var i=0;
    idata.length;
i++){
       var img = document.createElement("img")   img.src = data[i].src;
       var imgbox = document.createElement("div")   imgbox.classname = "imgbox";
       var box = document.createElement("div")   box.className = "box";
       imgbox.appendChild(img);
       box.appendChild(imgbox);
       this.cont.appendChild(box);
  }
      // 初始化所有  this.box = document.querySelectorAll(".box");
      this.heightArr = [];
      // 重新渲染瀑布流结构  this.FirstLine();
      this.otherLine();
  }
  init(){
      // 计算一行最多能放几个，再计算最大宽度  this.clientW = document.documentElement.clientWidth;
      this.boxW = this.box[0].offsetWidth;
      this.maxNum = parseInt(this.clientW / this.boxW)  this.cont.style.width = this.boxW * this.maxNum + "px";
      // 3. 区分第一行  this.firstLine()  // 4. 区分其他行  this.otherLine();
  }
  firstLine(){
      // 5. 获取所有元素的高度，存起来  for(var i=0;
    ithis.maxNum;
i++){
       this.heightArr.push(this.box[i].offsetHeight);
  }
  }
  otherLine(){
      for(var i=this.maxNum;
    ithis.box.length;
i++){
       // 6. 拿到第一行所有的高度   // console.LOG(this.heightArr)   // 计算最小值和最小值的索引   // var min = getMin(this.heightArr);
       // var min = Math.min.apply(null,this.heightArr);
       var min = Math.min(...this.heightArr);
       var minIndex = this.heightArr.indexOf(min);
       // console.log(minIndex);
       // 7. 设置元素的定位   this.box[i].style.position = "absolute";
       // 8. 设置元素的top和left   this.box[i].style.top = min + "px";
       this.box[i].style.left = minIndex * this.boxW + "px";
       // 9. 修改最小值   this.heightArr[minIndex] += this.box[i].offsetHeight;
  }
      this.scrollH = document.documentElement.scrollHeight;
  }
 }
 function getMin(arr){
      // 先对数组进行截取（为了深拷贝）  // 然后对截取出的新数组排序  // 找第0位  // 返回出去  return arr.slice(0).sort((a,b)=>
    a-b)[0];
 }
      /script>
    /head>
    body>
     div class="cont">
     div class="box">
      div class="imgbox">
      img src="../imgs/4.jpg" alt="">
      /div>
     /div>
     div class="box">
      div class="imgbox">
      img src="../imgs/2.jpg" alt="">
      /div>
     /div>
     div class="box">
      div class="imgbox">
      img src="../imgs/3.jpg" alt="">
      /div>
     /div>
     div class="box">
      div class="imgbox">
      img src="../imgs/5.jpg" alt="">
      /div>
     /div>
     div class="box">
      div class="imgbox">
      img src="../imgs/1.jpg" alt="">
      /div>
     /div>
     div class="box">
      div class="imgbox">
      img src="../imgs/6.jpg" alt="">
      /div>
     /div>
     div class="box">
      div class="imgbox">
      img src="../imgs/7.jpg" alt="">
      /div>
     /div>
     div class="box">
      div class="imgbox">
      img src="../imgs/8.jpg" alt="">
      /div>
     /div>
     div class="box">
      div class="imgbox">
      img src="../imgs/9.jpg" alt="">
      /div>
     /div>
     div class="box">
      div class="imgbox">
      img src="../imgs/10.jpg" alt="">
      /div>
     /div>
     div class="box">
      div class="imgbox">
      img src="../imgs/4.jpg" alt="">
      /div>
     /div>
     div class="box">
      div class="imgbox">
      img src="../imgs/2.jpg" alt="">
      /div>
     /div>
     div class="box">
      div class="imgbox">
      img src="../imgs/3.jpg" alt="">
      /div>
     /div>
     div class="box">
      div class="imgbox">
      img src="../imgs/5.jpg" alt="">
      /div>
     /div>
     div class="box">
      div class="imgbox">
      img src="../imgs/1.jpg" alt="">
      /div>
     /div>
     div class="box">
      div class="imgbox">
      img src="../imgs/6.jpg" alt="">
      /div>
     /div>
     div class="box">
      div class="imgbox">
      img src="../imgs/7.jpg" alt="">
      /div>
     /div>
     div class="box">
      div class="imgbox">
      img src="../imgs/8.jpg" alt="">
      /div>
     /div>
     div class="box">
      div class="imgbox">
      img src="../imgs/9.jpg" alt="">
      /div>
     /div>
     div class="box">
      div class="imgbox">
      img src="../imgs/10.jpg" alt="">
      /div>
     /div>
     div class="box">
      div class="imgbox">
      img src="../imgs/4.jpg" alt="">
      /div>
     /div>
     div class="box">
      div class="imgbox">
      img src="../imgs/2.jpg" alt="">
      /div>
     /div>
     div class="box">
      div class="imgbox">
      img src="../imgs/3.jpg" alt="">
      /div>
     /div>
     div class="box">
      div class="imgbox">
      img src="../imgs/5.jpg" alt="">
      /div>
     /div>
     div class="box">
      div class="imgbox">
      img src="../imgs/1.jpg" alt="">
      /div>
     /div>
     div class="box">
      div class="imgbox">
      img src="../imgs/6.jpg" alt="">
      /div>
     /div>
     div class="box">
      div class="imgbox">
      img src="../imgs/7.jpg" alt="">
      /div>
     /div>
     div class="box">
      div class="imgbox">
      img src="../imgs/8.jpg" alt="">
      /div>
     /div>
     div class="box">
      div class="imgbox">
      img src="../imgs/9.jpg" alt="">
      /div>
     /div>
     div class="box">
      div class="imgbox">
      img src="../imgs/10.jpg" alt="">
      /div>
     /div>
     /div>
    /body>
    /html>
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• JS实现图片瀑布流效果
• 使用js实现瀑布流效果
• js实现瀑布流触底动态加载数据
• 如何用JS实现网页瀑布流布局
• JavaScript实现瀑布流布局的3种方式
• JavaScript瀑布流的实现你学会了吗

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！