js实现瀑布流布局（无限加载）

程序员文章站 2022-06-22 13:54:33

本文实例为大家分享了js实现瀑布流布局的具体代码，供大家参考，具体内容如下1.实现瀑布流布局思路准备好数据之后. 绑定滚动事件. 判断页面是否到底（滚动的距离+可是区域的高度 == 最后一个元素的to...

本文实例为大家分享了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;i<data.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;i<this.maxnum;i++){
   this.heightarr.push(this.box[i].offsetheight);
  }
  }
  otherline(){
  for(var i=this.maxnum;i<this.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实现瀑布流布局（无限加载）

瀑布流布局并自动加载实现代码_jquery

jQuery向下滚动即时加载内容实现的瀑布流效果，jquery向下滚动_PHP教程

原生js实现瀑布流布局

jQuery向下滚动即时加载内容实现的瀑布流效果_php实例

瀑布流布局并自动加载实现代码_jquery

js实现瀑布流的一种简单方法实例分享_javascript技巧

异步加载技术实现当滚动条到最底部的瀑布流效果，异步滚动条

jQuery向下滚动即时加载内容实现的瀑布流效果_PHP

javascript实现瀑布流加载图片原理_javascript技巧

Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法