成都蓝鸥培训学校—官网

咨询热线:
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>
培训世界 成都蓝鸥培训学校体验课 免费预约