瀑布流布局:JS+绝对定位(1)

导语 现在很多网站博客都流行瀑布流布局,你是否也想了解是如何实现的呢?本文将给大家详细的介绍。绝对定位方式的瀑布流布局!

绝对定位方式的瀑布流布局:

一、布局

1、包围块框的容器:


  1. <div id="main"> 
  2.     ... ...  
  3. <div> 

2、一个块框:


  1. <div class="pin"> 
  2.     <div class="box"> 
  3.         <img src="./images/g (1).jpg"/> 
  4.     div> 
  5. div> 

3、初始化第一行/5个块框:


  1. .pin{  
  2.         padding15px 0 0 15px;  
  3.         floatleft;}  
  4.     .box{  
  5.         padding10px;  
  6.         border:1px solid #ccc;}  
  7.     .box img{  
  8.         width:192px;  
  9.         height:auto;} 

效果:

\

二、思路:

1、设置父级main的样式:水平居中。

2、设置每个块框pin的样式:绝对定位。

3、设置窗口滚动事件的监听函数:读取数据添加块框。

JS实现:

1-①:获取父级oParent:

1-②:创建函数getClassObj()-通过父级id和块框类名-获取包含块框的数组。


  1. var oParent=document.getElementById('main');// 父级对象  
  2. var aPin=getClassObj(oParent,pin);// 获取存储块框pin的数组aPin  
  3. var num=Math.floor(document.documentElement.clientWidth/aPin[0].offsetWidth);//获取-每行中能容纳的块框个数-num【窗口宽度除以一个块框宽度】  
  4.  
  5. arent.style.cssText='width:'+iPinW*num+'px;margin:0 auto;';//用cssText属性为父级main添加居中样式:定宽+自动水平外边距  

  1. function getClassObj(parent,className){  
  2.         var obj=parent.getElementsByTagName('*');//获取 父级的所有子集  
  3.         var pinS=[];//创建一个数组 用于存储类为className的元素  
  4.         for (var i=0;i//遍历子集、判断类名、压入数组  
  5.             if (obj[i].className==className)  
  6.                 pinS.push(obj[i]);  
  7.         };  
  8.         return pinS;} 

2-①:创建数组pinHArr-用于存储每一列高度;

2-②:for语句遍历每个块框aPin[i],将前num个块框赋值给数组pinHArr,对超出一行能容纳的块框数num的块框绝对定位。

2-③:用创建函数getminHIndex()-返回一个数组中的最小值


  1. var pinHArr=[];//用于存储 每列中的所有块框相加的高度【随着列数的不同此数组的length也随之改变】  
  2.     for(var i=0;i//遍历数组aPin的每个块框元素  
  3.         var pinH=aPin[i].offsetHeight;//获取数组aPin的第i个块框的可见宽offsetHeight  
  4.         if(i//  
  5.             pinHArr[i]=pinH; //第一行中的num个块框aPin 先添加进数组pinHArr  
  6.         }else{  
  7.             var minH=Math.min.apply(null,pinHArr);//计算数组pinHArr中的最小值minH  
  8.             var minHIndex=getminHIndex(pinHArr,minH);//通过创建的getminHIndex()-获取最小值minH在数组pinHArr中的索引minHIndex  
  9.             aPin[i].style.position='absolute';//设置绝对位移  
  10.             aPin[i].style.top=minH+'px';  
  11.             aPin[i].style.left=aPin[minHIndex].offsetLeft+'px';//数组 最小高元素的高 + 添加上的aPin[i]块框高  
  12.             pinHArr[minHIndex]+=aPin[i].offsetHeight;//更新添加块框后的列高  
  13.         }  
  14.     } 

  1. function getminHIndex(arr,minH){  
  2.     for(var i in arr){  
  3.         if(arr[i]==minH)return i;  
  4.     }  

3:设置窗口滚动事件的监听函数:读取数据添加块框。


  1. var dataInt={'data':[{'src':'g (1).jpg'},{'src':'g (9).jpg'},{'src':'g (2).jpg'},{'src':'g (4).jpg'}]};//一个临时的数据对象  
  2.     //下面定义窗口滚动事件监听函数  
  3.     window.onscroll=function(){  
  4.         if(checkscrollside()){  
  5.         var oParent=document.getElementById('main');// 父级对象  
  6.         for(var i=0;i
  7.             var oPin=document.createElement('div'); //创建添加 元素节点pin  
  8.             oPin.className='pin';                   //添加 类名 name属性  
  9.             oParent.appendChild(oPin);              //创建添加 子节点box  
  10.             var oBox=document.createElement('div');  
  11.             oBox.className='box';  
  12.             oPin.appendChild(oBox);  
  13.             var oImg=document.createElement('img');//创建添加 子节点img  
  14.             oImg.src='./images/'+dataInt.data[i].src;  
  15.             oBox.appendChild(oImg);  
  16.         }  
  17.         waterfall('main','pin');//将①②封装成函数waterfall(),将添加的节点添加到添加和定位到文档中。  
  18.         };  
  19.     } 

  1. function checkscrollside(){  
  2.         var oParent=document.getElementById('main');  
  3.         var aPin=getClassObj(oParent,'pin');  
  4.         var lastPinH=aPin[aPin.length-1].offsetTop+Math.floor(aPin[aPin.length-1].offsetHeight/2);//创建【触发添加块框函数waterfall()】的高度:最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)  
  5.         var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//注意解决兼容性  
  6.         var documentH=document.documentElement.clientHeight;//窗口高度  
  7.         return (lastPinHtrue:false;//到达指定高度后 返回true,触发waterfall()函数  
  8.     } 

三、最终效果:

\

四、总结:此为让自己梳理一下思路,表达不太仔细连贯,仅供参考。

  

http://www.aseoe.com/ true 瀑布流布局:JS+绝对定位(1) http://www.aseoe.com/show-11-26-1.html report <?php echo strlen($content) / 2; ?> 现在很多网站博客都流行瀑布流布局,你是否也想了解是如何实现的呢?本文将给大家详细的介绍。绝对定位方式的瀑布流布局!
TAG:瀑布 布局 绝对 JS
本站欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明: 文章转载自:爱思资源网 http://www.aseoe.com/show-11-26-1.html

[前端插件推荐] Plugin

1 2 3 4
  • jQuery实现逐字逐句显示插件l-by-l.min.js
  • jQuery带方向感知的鼠标滑过图片边框特效插件
  • jQuery HotKeys监听键盘按下事件keydown插件
  • 响应式无限轮播jQuery旋转木马插件
响应式无限轮播jQuery旋转木马插件
web前端开发
爱思资源网 Copyright 2012-2014 Www.Aseoe.Com All rights reserved.(晋ICP备13001436号-1)