瀑布流的实现

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78

window.onload=function(){       getE('main','box');       var dataint={'data':[{'src':'0.png'},{'src':'1.png'},{'src':'2.png'},{'src':'3.png'},{'src':'4.png'},{'src':'5.png'}]}       window.onscroll=function(){         if(sfons){             var oparent=document.getElementById('main');             for(var i=0;i<dataint.data.length;i++){                 var cb=document.createElement('div');//创建一个div                 cb.className='box';//加一个box class属性                 oparent.appendChild(cb);//添加到oparent的尾部                 var cp=document.createElement('div');                 cp.className='pic';                 cb.appendChild(cp);                 var ci=document.createElement('img');                 ci.src='./img/'+dataint.data[i].src;                 cp.appendChild(ci);             }             getE('main','box');         }     } } function getE(parent,box){     //将mian下的box取出来     var oparent=document.getElementById(parent);     var boxl=getbcls(oparent,'box');     //获取一个盒子的宽度，看可以分成几列     var boxw=boxl[0].offsetWidth;     var clus=Math.floor(document.documentElement.clientWidth/boxw);     //设置main的宽     oparent.style.cssText='width:'+clus*boxw+'px;margin:0 auto';     //取高度最小的盒子，在其后面加下一张呢图片     var arrh=new Array();//存放几列的高度     for(var i=0;i<boxl.length;i++){         if(i<clus){             arrh.push(boxl[i].offsetHeight);         }         else{             var minh=Math.min.apply(null,arrh);      //获取最小高度             var index=getw(arrh,minh);               //得到最小高度位于的那列             boxl[i].style.position='absolute';       //绝度定位，把对象卡在那里             boxl[i].style.top=minh+'px';             boxl[i].style.left=index*boxw+'px';             arrh[index]+=boxl[i].offsetHeight;       //把新的高度传给arrh         }     } } //获取class function getbcls(parent,clsnm){     var boxarr=new Array();         //用来存放class数组     var oele=parent.getElementsByTagName('*');         for(var i=0;i<oele.length;i++){             if(oele[i].className==clsnm){                 boxarr.push(oele[i]);             }         }         return boxarr; } //找到高度最小的那列 function getw(arr,val){     for(var i in arr){         if(arr[i]==val){            return i;         }     } } //是否具备加载数据块的条件 function sfons(){     var oparent=document.getElementById('main');     var boxa=getbcls(oparent,'box');     var lasth=boxa[boxa.length-1].offsetTop+Math.floor(boxa[boxa.length-1].offsetHeight/2);//图片高度     var scrl=document.body.scrollTop||document.documentElement.scrollTop;//滚动条滚动的距离     var wh=document.body.clientHeight||document.documentElement.clientHeight;//屏幕的高度     return (lasth<srcl+wh)?true:false;//判断是否具备加载的距离   }