瀑布流布局：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.         padding: 15px 0 0 15px;  
3.         float: left;}  
4.     .box{  
5.         padding: 10px;  
6.         border:1px solid #ccc;}  
7.     .box img{  
8.         width:192px;  
9.         height:auto;} 

效果：

84d7105147aa9f085b244c6a12f2ac94.jpg (196.69 KB, 下载次数: 72)

下载附件

\

2017-12-10 11:47 上传

二、思路：

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.className==className)  
6.                 pinS.push(obj);  
7.         };  
8.         return pinS;} 

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

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

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

1. var pinHArr=[];//用于存储 每列中的所有块框相加的高度【随着列数的不同此数组的length也随之改变】  
2.     for(var i=0;i//遍历数组aPin的每个块框元素  
3.         var pinH=aPin.offsetHeight;//获取数组aPin的第i个块框的可见宽offsetHeight  
4.         if(i//  
5.             pinHArr=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.style.position='absolute';//设置绝对位移  
10.             aPin.style.top=minH+'px';  
11.             aPin.style.left=aPin[minHIndex].offsetLeft+'px';//数组 最小高元素的高 + 添加上的aPin块框高  
12.             pinHArr[minHIndex]+=aPin.offsetHeight;//更新添加块框后的列高  
13.         }  
14.     } 

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

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.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.     } 

三、最终效果：

aa3a1fd2b822b495f661c2f15f5f3b06.jpg (373.59 KB, 下载次数: 64)

下载附件

\

2017-12-10 11:47 上传

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

  

true 瀑布流布局：JS+绝对定位(1) 爱思资源网 report 44626 现在很多网站博客都流行瀑布流布局，你是否也想了解是如何实现的呢？本文将给大家详细的介绍。绝对定位方式的瀑布流布局!

上一页 1 2 下一页