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

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

1.实现瀑布流布局思路

准备好数据之后

.绑定滚动事件

.判断页面是否到底（滚动的距离+可是区域的高度==最后一个元素的top）

.加载新数据，渲染新页面

.重新执行瀑布流效果

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

!DOCTYPEhtml

html

head

metacharset="UTF-8"

titleDocument/title

style

.cont{margin:0auto;background:#ccc;position:relative;}

.cont::after{content:"";display:block;clear:both;}

.box{float:left;padding:6px;}

.imgbox{border:solid1pxblack;padding:6px;border-radius:6px;}

.imgboximg{width:200px;display:block;}

/style

scriptsrc="data/data.js"/script

script

//W1.准备数据

//W2.绑定滚动事件

//W3.判断页面是否到底（滚动的距离+可是区域的高度==最后一个元素的top）

//W4.加载新数据，渲染新页面

//W5.重新执行瀑布流效果

onload=function(){

newWaterfall;

classWaterfall{

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(){

varthat=this;

onscroll=function(){

varscrollT=document.documentElement.scrollTop;

if(that.clientH+scrollTthat.scrollH-300){

that.render()

render(){

for(vari=0;idata.length;i++){

varimg=document.createElement("img")

img.src=data[i].src;

varimgbox=document.createElement("div")

imgbox.className="imgbox";

varbox=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(vari=0;ithis.maxNum;i++){

this.heightArr.push(this.box[i].offsetHeight);

otherLine(){

for(vari=this.maxNum;ithis.box.length;i++){

//6.拿到第一行所有的高度

//console.log(this.heightArr)

//计算最小值和最小值的索引

//varmin=getMin(this.heightArr);

//varmin=Math.min.apply(null,this.heightArr);

varmin=Math.min(...this.heightArr);

varminIndex=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;

functiongetMin(arr){

//先对数组进行截取（为了深拷贝）

//然后对截取出的新数组排序

//找第0位

//返回出去

returnarr.slice(0).sort((a,b)=a-b)[0];

/script

/head

body

div

div

div

imgsrc="../imgs/4.jpg"alt=""

/div

/div

div

div

imgsrc="../imgs/2.jpg"alt=""

/div

/div

div

div

imgsrc="../imgs/3.jpg"alt=""

/div

/div

div

div

imgsrc="../imgs/5.jpg"alt=""

/div

/div

div

div

imgsrc="../imgs/1.jpg"alt=""

/div

/div

div

div

imgsrc="../imgs/6.jpg"alt=""

/div

/div

div

div

imgsrc="../imgs/7.jpg"alt=""

/div

/div

div

div

imgsrc="../imgs/8.jpg"alt=""

/div

/div

div

div

imgsrc="../imgs/9.jpg"alt=""

/div

/div

div

div

imgsrc="../imgs/10.jpg"alt=""

/div

/div

div

div

imgsrc="../imgs/4.jpg"alt=""

/div

/div

div

div

imgsrc="../imgs/2.jpg"alt=""

/div

/div

div

div

imgsrc="../imgs/3.jpg"alt=""

/div

/div

div

div

imgsrc="../imgs/5.jpg"alt=""

/div

/div

div

div

imgsrc="../imgs/1.jpg"alt=""

/div

/div

div

div

imgsrc="../imgs/6.jpg"alt=""

/div

/div

div

div

imgsrc="../imgs/7.jpg"alt=""

/div

/div

div

div

imgsrc="../imgs/8.jpg"alt=""

/div

/div

div

div

imgsrc="../imgs/9.jpg"alt=""

/div

/div

div

div

imgsrc="../imgs/10.jpg"alt=""

/div

/div

div

div

imgsrc="../imgs/4.jpg"alt=""

/div

/div

div

div

imgsrc="../imgs/2.jpg"alt=""

/div

/div

div

div

imgsrc="../imgs/3.jpg"alt=""

/div

/div

div

div

imgsrc="../imgs/5.jpg"alt=""

/div

/div

div

div

imgsrc="../imgs/1.jpg"alt=""

/div

/div

div

div

imgsrc="../imgs/6.jpg"alt=""

/div

/div

div

div

imgsrc="../imgs/7.jpg"alt=""

/div

/div

div

div