js点滴--JavaScript瀑布流实现技巧

　　[js点滴]JavaScript瀑布流实现技巧

　　分类：js动画详解

　　基本结构

　　每一张图片，外层是不可见的box，中间是可见的pic装着img，要求盒子宽度固定。

　　距离控制

　　要使多个盒子间隙相同时，指定向左浮动并且设定box的上左内边距即可，因为box不可见，实现的效果就类似于pic互相间隔开。

　　排列规则

　　先固定*行，然后按照*行的宽高，将后续图片插入上一行*短的图片下面。

　　获取文档宽度和每个盒子宽度(此处取*个盒子)，然后相除获得一行排列盒子的个数，将容器设置为盒子。

　　定位*行盒子：top为0，left为单个盒子宽度×盒子顺序的下标，将每一列盒子的高度存储在一个数组中。

　　获取*行盒子高度的*小值(Math.min)，然后依次比较确定是第几个盒子，对于顺序大于cnum的盒子，即*行以后，位置即在*行*短的盒子之下，定位为absolute，top值为*短盒子的高度，left值和上面的*短盒子一样。

　　然后将盒子高度的数组相应列数的高度值更新，继续排列下一个盒子。

　　更新图片

　　当滚动条拉到*后张图片露出一半时，加载剩余的图片。

　　A是*后一个box盒子的上边距（offsetTop），B是*后一个盒子高度的一半，C是用户拉动滚轴的长度（scrollTop），D是页面高度（clientHeight）。从上图可以看出，当*后的box盒子没出到一半时满足

　　A+B>C+D

　　而当*后一个盒子出来一半时应该加载剩余图片了，此时A+B

　　适应浏览器宽度变化

　　一行能排列的盒子个数在文档刚加载完成时就固定了。当后续改变宽度时，需要随之进行改变。

　　在window.onresize时调用waterfall函数。

　　<scripttype="text/javascript">

　　vararrH=[];//记录每一列的高度

　　vark=0;//用来记录当前第几个div的个数

　　createDiv(20)

　　change()

　　//1.创建DIV多少个div，*函数的封装

　　functioncreateDiv(n){

　　for(vari=0;i<n;i++){

　　k++;//每次调用for循环都对k进行++

　　vardiv=document.createElement("div");

　　//3.div的高度*调用随机函数进行创建

　　div.style.height=rndFn(100,300)+"px";

　　div.innerHTML=k;

　　document.body.appendChild(div);

　　}

　　}

　　//2.封装一个随机函数

　　functionrndFn(min,max){

　　returnMath.round(Math.random()*(max-min)+min);

　　}

　　//4.封装函数，根据窗口大小制定div的排列方式

　　functionchange(){

　　//可视窗口的宽度

　　varwinW=document.documentElement.clientWidth||window.innerWidth;

　　//获取所有DIV

　　varaDiv=document.querySelectorAll("div");

　　//计算一行放多少列

　　varnum=parseInt(winW/(aDiv[0].offsetWidth+10));

　　//计算空余位置的一半

　　varcenter=(winW-(num*310-10))/2;

　　//0310620930

　　arrH=[];

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

　　//前一排按照从左到右排列顺序排列即可

　　if(i<num){

　　aDiv[i].style.left=center+i*(300+10)+"px";

　　aDiv[i].style.top=0;

　　//记录每一列的高度

　　arrH[i]=aDiv[i].offsetHeight+10;

　　//arrH.push(aDiv[i].offsetHeight+10)

　　}else{

　　//第二排开始就要开始查找*小高度的div，然后在*小高度的div下插入新的元素

　　varmin=findMin(arrH);

　　aDiv[i].style.left=center+min*(300+10)+"px";

　　aDiv[i].style.top=arrH[min]+"px";

　　arrH[min]+=aDiv[i].offsetHeight+10;

　　}

　　}

　　}

　　functionfindMin(arr){

　　varmin=arr[0];

　　varindex=0;

　　for(vari=1;i<arr.length;i++){

　　if(min>arr[i]){

　　min=arr[i];

　　index=i;

　　}

　　}

　　returnindex;

　　}

　　window.onresize=function(){

　　change();

　　}

　　window.onscroll=function(){

　　varsTop=document.body.scrollTop||document.documentElement.scrollTop;

　　varwinH=document.documentElement.clientHeight;

　　if(sTop+winH+20>=arrH[0]){

　　createDiv(10);

　　change();

　　}

　　}

　　</script>