重庆蓝鸥学校—官网

咨询热线:
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;
 
  //获取所有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>
培训世界 重庆蓝鸥学校体验课 免费预约