瀑布流

概念：瀑布流，又称瀑布流式布局。视觉表现为宽度相等高度不定的元素组成的参差不齐的多栏布局，随着页面滚动，新的元素附加到最短的一列而不断向下加载。

原理：瀑布流本质上就是寻找各列之中高度最小的一列，并将新的元素添加到该列后面，只要有新的元素需要排列，就继续寻找所有列中的高度最小列，把后来的元素添加到高度最小列上。

//瀑布流实现逻辑constbinding=data={letnewData=data.map(item={//等比处理图片宽高let{width,height}=item;item.width=;item.height=height/(width/);returnitem;});for(leti=0;inewData.length;i+=3){//截取三个元素letgroup=newData.slice(i,i+3);//按照高度从小到大排序columns三个大容器columns.sort((a,b)=b.offsetHeight-a.offsetHeight);//按照每个图片高度从小到大排序group中的图片group.sort((a,b)=a.height-b.height);group.forEach((item,index)={let{height,title,pic,link}=item;letcard=document.createElement(div);card.className="card";card.innerHTML=`ahref="${link}"target="_blank"divclass="lazyImageBox"style="height:${height}px"imgsrc=${imgDefalutSrc}alt=""data-image="${pic}"/divp${title}/p/a`;columns[index].appendChild(card);});}};

懒加载

概念：图片的懒加载是前端性能优化中的重要一环，通过图片或者数据的延迟加载，可以让第一次打开进入页面速度更快更流畅，用户体验蹭蹭蹭提高。

原理：进入页面时，图片的src地址为空不显示，真实图片地址放在img的自定义属性上，向上滚动时实时计算图片盒子距离视口的位置，当达到需要显示区域时，就替换图片的真实src地址。

//懒加载处理逻辑//单张图片延迟加载constlazyImage=imageBox={letimg=imageBox.querySelector(img),dataImage=img.getAttribute(data-image);img.src=dataImage;img.onload=()={img.style.opacity=1;};//处理过的盒子设置一个标志imageBox.setAttribute(isLoad,true);};//图片延迟加载:盒子底边距离BODY的偏移=浏览器底边距离BODY的偏移“完全出现在视口中了”letwinH=document.documentElement.clientHeight;//当前视口高度constlazying=()={letimageBoxs=Array.from(document.querySelectorAll(.lazyImageBox));imageBoxs.forEach(imageBox={letisLoad=imageBox.getAttribute(isLoad);//判断是否处理过if(isLoad)return;letB=offset(imageBox).top+imageBox.offsetHeight,A=winH+document.documentElement.scrollTop;if(B=A)lazyImage(imageBox);});};//进入界面第一次执行lazying();//页面滚动window.onscroll=throttle(lazying);//懒加载第二种方案letobserver=newIntersectionObserver(changes={changes.forEach(item={let{isIntersecting,target}=item;if(isIntersecting){lazyImage(target);observer.unobserve(target);}});},{threshold:[1]});letimageBoxs=Array.from(document.querySelectorAll(.lazyImageBox));imageBoxs.forEach(imageBox={observer.observe(imageBox);});

效果

源码