热门课程：
|
400-888-4011 |
|
- 学校新闻
-
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;//获取所有DIVvaraDiv=document.querySelectorAll("div");//计算一行放多少列varnum=parseInt(winW/(aDiv[0].offsetWidth+10));//计算空余位置的一半varcenter=(winW-(num*310-10))/2;//0310620930arrH=[];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>
电子营业执照
教育资质
全国优秀教育网站
企业信用等级AA级