[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>
重庆蓝鸥学校—官网
