解析javascript瀑布流原理实现图片滚动加载

2019-11-20 10:25:18

字体：大中小

来源：转载

供稿：网友

先科普下瀑布流吧

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格，像美丽说、淘宝网都有使用。

这是我实现的一个效果，就是怎么滚动都加载不玩。就跟瀑布一样流啊流！

这里的实现方式我们只说Js实现方法

实现原理：

对容器中已有数据块元素进行第一次计算1 容器总宽度 2 列宽度 3 最小列数，得到列数后，用一个数组存放盒子所有高度，找出最小高度。之后根据序列号更新高度；看着有些拗口，实现起来就很简单了。

对于滚动加载：即滚动到哪个高度后，需要去加载数据，其实这个就是列的最小高度值，这样当前滚动值和最小高度值比较一下即可判断出来，是否要触发加载数据；就是写一个函数，用来判断是否达到加载图片条件，如果达到，就开始加载。比如获得最后一张图片的offsetTop,可视区高度,滚动距离,也就是当图片的offsetTop小于可视区高度和滚动距离之和的情况下，此时就应该加载了，不过条件可以随便定，也可以等滚动到图片的一半时候在触发加载条件,如图所示:

先上HTML CSS代码

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>waterfall</title> <script src="script.js"></script> <style>  * {   margin: 0;   padding: 0;  }  body {   background: yellow;  }  #container {  }  #container .pin {   padding-left: 15px;   padding-top: 15px;   float: left;  }  #container .div-box {   float: left;   border: 1px solid #ccc;   box-shadow: 0 0 5px #bbb;   background: #fff;   padding: 12px;   border-radius: 9px;  }  #container .div-box img {   width: 300px;  }  #container .div-box p {   text-align: center;   font-size: 20px;   font-weight: bold;   color: red;  } </style> <script>   </script></head><body> <div id="container">  <div class="pin">   <div class="div-box">    <img src="img/1.jpg" alt="">    <p>白超华-博客园</p>   </div>  </div>  <div class="pin">   <div class="div-box">    <img src="img/2.jpg" alt="">    <p>白超华-博客园</p>   </div>  </div>  <div class="pin">   <div class="div-box">    <img src="img/3.jpg" alt="">    <p>白超华-博客园</p>   </div>  </div>  <div class="pin">   <div class="div-box">    <img src="img/4.jpg" alt="">    <p>白超华-博客园</p>   </div>  </div>  <div class="pin">   <div class="div-box">    <img src="img/5.jpg" alt="">    <p>白超华-博客园</p>   </div>  </div>  <div class="pin">   <div class="div-box">    <img src="img/6.jpg" alt="">    <p>白超华-博客园</p>   </div>  </div>  <div class="pin">   <div class="div-box">    <img src="img/7.jpg" alt="">    <p>白超华-博客园</p>   </div>  </div>  <div class="pin">   <div class="div-box">    <img src="img/8.jpg" alt="">    <p>白超华-博客园</p>   </div>  </div>  <div class="pin">   <div class="div-box">    <img src="img/9.jpg" alt="">    <p>白超华-博客园</p>   </div>  </div>  <div class="pin">   <div class="div-box">    <img src="img/10.jpg" alt="">    <p>白超华-博客园</p>   </div>  </div>  <div class="pin">   <div class="div-box">    <img src="img/1.jpg" alt="">    <p>白超华-博客园</p>   </div>  </div>  <div class="pin">   <div class="div-box">    <img src="img/2.jpg" alt="">    <p>白超华-博客园</p>   </div>  </div>  <div class="pin">   <div class="div-box">    <img src="img/3.jpg" alt="">    <p>白超华-博客园</p>   </div>  </div>  <div class="pin">   <div class="div-box">    <img src="img/4.jpg" alt="">    <p>白超华-博客园</p>   </div>  </div>  <div class="pin">   <div class="div-box">    <img src="img/5.jpg" alt="">    <p>白超华-博客园</p>   </div>  </div>  <div class="pin">   <div class="div-box">    <img src="img/6.jpg" alt="">    <p>白超华-博客园</p>   </div>  </div> </div></body></html>

JS代码，每行都有注释

window.onload = function(){ var data = {     //模拟后台数据 的一个JSON格式的文件  "data":[   {"src":"1.jpg"},   {"src":"2.jpg"},   {"src":"3.jpg"},   {"src":"4.jpg"},   {"src":"5.jpg"},  ] }; window.onscroll = function(){  if(checkScroll()){   //判断是否具备滚动加载得条件   var oParent = document.getElementById('container');   for(var i=0; i<data.data.length; i++){    var div1 = document.createElement('div'); //创建div元素    div1.className = 'pin';     //设置class    oParent.appendChild(div1);    var div2 = document.createElement('div');//创建div元素    div2.className = 'div-box';    div1.appendChild(div2);    var imgs = document.createElement('img');//创建img元素    imgs.style.width = '300px';    imgs.src = 'img/'+data.data[i].src; //设置读取路径    div2.appendChild(imgs);    var p = document.createElement('p');//创建p元素    p.innerHTML = '白超华-博客园';    div2.appendChild(p);   }   waterfall('container','pin');  //--注意 别忘了这句，当滚动时候就执行  } } waterfall('container','pin');}function waterfall(parent, box){ var oParent = document.getElementById(parent);//获取父级对象 var aBox = getByClass(oParent,box);//获取所有class为pin的盒子的集合 var boxWidth = aBox[0].offsetWidth;//获取一个盒子的宽 var pageWidth = document.body.clientWidth||document.documentElement.clientWidth;//获取可视区宽 var cols = Math.floor(pageWidth/boxWidth);//获得列数 var arrH = [];//用于存放盒子的高 for(var i=0; i<aBox.length; i++){  if(i<cols){//当小于第一列个数的时候   arrH.push(aBox[i].offsetHeight);  } else {   var minH = Math.min.apply(null,arrH);//得到数组中盒字的最小高度minH;   var index = getMinIndex(arrH,minH);   aBox[i].style.position = 'absolute';//设置绝对定位   aBox[i].style.top = minH+'px';//设置top，就是最小高度   aBox[i].style.left = aBox[0].offsetWidth*index+'px';//设置left，就是一个盒子的宽*index索引数   arrH[index]+=aBox[i].offsetHeight; //更新新添加盒字后的列高  } }}//通过父级获取classfunction getByClass(parent, classname){ var aClass = parent.getElementsByTagName('*'); var arr = []; for(var i=0; i<aClass.length; i++){  if(aClass[i].className == classname){   arr.push(aClass[i]);  } } return arr;}//最小值的索引indexfunction getMinIndex(arr,val){ for( i in arr){  if(arr[i] == val){   return i;  } }}//function checkScroll(){ var oParent = document.getElementById('container'); var aBox = getByClass(oParent,'pin'); var lastBoxHeight = aBox[aBox.length-1].offsetTop;// 当滚到到这个距离时候就开始加载 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//兼容的滚动距离 var documentHeight = document.documentElement.clientHeight; //页面高度 if(lastBoxHeight<scrollTop+documentHeight){  return true; }}

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

上一篇：ES6中如何使用Set和WeakSet

下一篇：javascript实现可键盘控制的抽奖系统