js实现瀑布流的两种方法

来源：互联网发布：3799游戏盒软件编辑：程序博客网时间：2024/06/13 08:36

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}#box{margin: 0 auto;width: 1140px;position: relative;}.div1{padding: 8px;position: absolute;}.div2{width: 200px;padding: 5px;border: 1px solid #999;}.img{width: 200px;display: block;}</style><script type="text/javascript">/*实现原理：通过position绝对定位的方式，判断哪一列当前高度最小，然后把下一张图片定位到那一列下面。*/window.onload=function (){var oBox=document.getElementById('box');var aDiv1=[];var flag=true;//用来判断是否可以加载数据/*实际项目中从后台导入数据，这里为演示，用json假数据块*/var json={'data':[{'src':'img/1.jpg'},{'src':'img/2.jpg'},{'src':'img/3.jpg'},{'src':'img/4.jpg'},{'src':'img/5.jpg'},{'src':'img/6.jpg'},{'src':'img/7.jpg'},{'src':'img/8.jpg'},{'src':'img/9.jpg'},{'src':'img/10.jpg'},{'src':'img/11.jpg'},{'src':'img/12.jpg'}],'imgH':[{'height':'232px'},{'height':'264px'},{'height':'300px'},{'height':'289px'},{'height':'267px'},{'height':'278px'},{'height':'300px'},{'height':'234px'},{'height':'271px'},{'height':'251px'},{'height':'363px'},{'height':'333px'}]}function getCont(){/*创建节点。加载数据*//*在box中插入下面所示节点,div1设置padding的right,top的值，让每一列之间有空隙。<div class="div1"><div class="div2"><img src=""/></div></div>*/for (var i=0;i<json.data.length;i++) {var oDiv1=document.createElement('div');oDiv1.className='div1';var oDiv2=document.createElement('div');oDiv2.className='div2';oDiv1.appendChild(oDiv2);var oImg=document.createElement('img');oImg.className='img';oImg.src=json.data[i].src;oImg.style.height=json.imgH[i].height;oDiv2.appendChild(oImg);oBox.appendChild(oDiv1);/*把创建的div1节点放到数组里*/aDiv1.push(oDiv1);}var arrH=[];for (var i=0;i<aDiv1.length;i++) {if(i<5){/*把前面5个div1从左到右排列，并把它的高度放进数组arrH*/arrH.push(aDiv1[i].offsetHeight);aDiv1[i].style.left=aDiv1[0].offsetWidth*i+'px';}else{/*else从第六个开始，获取到数组arrH中的最小值及其索引，left值为一个div1的宽度乘以索引，top为数组中最小的那个数，然后数组中最小的数加上新的div1的高度，然后继续循环*/var minH=Math.min.apply(null,arrH);for (var j=0;j<arrH.length;j++) {if(arrH[j]==minH){var index=j;}}aDiv1[i].style.left=aDiv1[0].offsetWidth*index+'px';aDiv1[i].style.top=minH+'px';arrH[index]+=aDiv1[i].offsetHeight;}}flag=true;//当数据都加载完让flag为true}getCont();/*上面已基本实现瀑布流布局，下面就是滚动加载数据了*/window.onscroll=function (){var lastT=aDiv1[aDiv1.length-1].offsetTop;var scroT=document.documentElement.scrollTop||document.body.scrollTop;if(lastT<scroT+document.documentElement.clientHeight){//这里判断加载是当图片加载到最后一个刚露出就加载数据if(flag){flag=false;//进来先让flag为false，防止未加载完数据又加载数据getCont();}}}};</script><script src="ajax.js" type="text/javascript" charset="utf-8"></script></head><body><div id="box"></div></body></html>

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">*{margin: 0;padding: 0;list-style: none;}#list{width: 1110px;margin: 0 auto;}#list li{width: 212px;float: left;padding: 5px;}.div{border: 1px solid #333;padding: 5px;margin-bottom: 10px;}.img{width: 200px;display: block;}</style><script src="ajax.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">window.onload=function (){/*实现：5个li分成5列，通过判断当前哪一个li高度最小，然后把div插入到那个li里面*/var oList=document.getElementById('list');var aLi=oList.getElementsByTagName('li');var flag=true;var json={'data':[{'src':'img/1.jpg'},{'src':'img/2.jpg'},{'src':'img/3.jpg'},{'src':'img/4.jpg'},{'src':'img/5.jpg'},{'src':'img/6.jpg'},{'src':'img/7.jpg'},{'src':'img/8.jpg'},{'src':'img/9.jpg'},{'src':'img/10.jpg'},{'src':'img/11.jpg'},{'src':'img/12.jpg'}],'imgH':[{'height':'232px'},{'height':'264px'},{'height':'300px'},{'height':'289px'},{'height':'267px'},{'height':'278px'},{'height':'300px'},{'height':'234px'},{'height':'271px'},{'height':'251px'},{'height':'363px'},{'height':'333px'}]}getLoad();function getLoad(){for (var i=0;i<json.data.length;i++) {var min=myMin();var oDiv=document.createElement('div');oDiv.className='div';var oImg=document.createElement('img');oImg.className='img';oImg.src=json.data[i].src;/*这里必须要设置高度，测试中发现js会把每一个节点、属性创建好，然后再加载入图片，不设置一开始就不能比较li的高度*/oImg.style.height=json.imgH[i].height;oDiv.appendChild(oImg);//高度最小的li插入divaLi[min].appendChild(oDiv);}flag=true;}//获取到当前li高度最小的索引function myMin(){var index=0;var min=aLi[index].offsetHeight;for (var i=1;i<aLi.length;i++) {if(aLi[i].offsetHeight<min){index=i;min=aLi[index].offsetHeight;}}return index;}window.onscroll=function (){var scroT=document.documentElement.scrollTop||document.body.scrollTop;var clieH=document.documentElement.clientHeight||document.body.clientHeight;var minN=myMin();//这里判断加载是刚出现空白就加载，也就是滚动到了高度最小那一列完了if((aLi[minN].offsetTop+aLi[minN].offsetHeight)<(scroT+clieH)){if(flag){flag=false;getLoad();}}};};</script></head><body><ul id="list"><li></li><li></li><li></li><li></li><li></li></ul></body></html>

两种方式孰优孰劣这里不比较，代码有一些还可以优化，这里只为展示实现原理。

0 0