页面瀑布流布局的实现 javascript+css

时间:2024-09-28 22:03:32

先看所谓的瀑布流布局

页面瀑布流布局的实现 javascript+css

在不使用瀑布流布局的情况下,当页面要显示不同高度的图片时,会如下面显示

页面瀑布流布局的实现 javascript+css

下面的元素总是和最靠近它的元素对齐。

为了使元素能够在我们想要的位置上显示,我们使用绝对定位。

说一下大体思路(也是看了别人的):
一切的不对齐都是从第一行的图片排列开始的,也许不是很准确,那么换一个说法:
要想使图片排列整齐,那么就得从第一行排列开始。
假设第一行x个元素排列中有一个最矮的(假设不假设都一样,假设是为了便于理解),
较高的元素比这个最矮的要多出一块区域来,那么第二行就要有人去把这个多出来的区域填上
当有人填上后,我们发现第一行最矮元素再加上这个填空白元素,比其他元素都更高了,这时我们把他俩看成一个元素
这样还是只有一行x个元素,然后就循环呗!每次找出最矮的来,让下一行的元素填充

代码如下(图片和reset.css要自己准备)

 <!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>瀑布流练习</title>
<link type="text/css" rel="stylesheet" href="./css/reset.css" /> <style>
ul.wrap{
width:1200px;
margin:0 auto;
position:relative; /* 相对定位 */
}
ul.wrap li{
width:400px;
float:left;
position:absolute; /* 绝对定位 */
}
ul.wrap li img{
/* 计算好长度 */
width:364px;
border:2px solid #bdbdbd;
padding:10px;
margin:4px;
}
</style> <script type="text/javascript"> window.onload = function(){
pubuliu("ulwrap",3,400);
}; //实现ul下的li瀑布流
//cols 表示一行几列,liWidth 表示一列的宽度
function pubuliu(ulId,cols,liWidth){
var wrap = document.getElementById(ulId);
var lis = wrap.getElementsByTagName("li"); var li_h = [];
for(var i=0; i<lis.length; i++){
if(i < cols){
li_h[i] = lis[i].scrollHeight;
//定位元素
lis[i].style.left = i * liWidth + "px";
lis[i].style.top = "0px";
}else{
//获取数组最小值
var min_liH = Math.min.apply( Math, li_h );
var key = getKeyByValue(li_h,min_liH);
//重定义最小高度
li_h[key] = min_liH + lis[i].scrollHeight; //定位元素
lis[i].style.left = key * liWidth + "px";
lis[i].style.top = min_liH + "px";
}
}
} //根据数组中的值获取索引
function getKeyByValue(arr,value){
for(var i=0; i<arr.length; i++){
if(arr[i] == value){
return i;
}
}
}
</script>
</head> <body>
<ul class="wrap clearfix" id="ulwrap">
<li>
<img src="./images/1.jpg" />
</li>
<li>
<img src="./images/2.jpg" />
</li>
<li>
<img src="./images/3.jpg" />
</li>
<li>
<img src="./images/4.jpg" />
</li>
<li>
<img src="./images/5.jpg" />
</li>
<li>
<img src="./images/6.jpg" />
</li>
<li>
<img src="./images/7.jpg" />
</li>
<li>
<img src="./images/8.jpg" />
</li>
<li>
<img src="./images/9.jpg" />
</li>
<li>
<img src="./images/10.jpg" />
</li>
</ul>
</body>
</html>

瀑布流布局分为两部分:css部分和js部分。

css部分负责确定 li 的宽度、一行显示几列和定位方式

js部分负责确定具体的定位坐标

解释一下pubuliu(ulId, cols, liWidth)这个函数。它对 ulId 元素下的子li元素进行瀑布流布局,cols是一行显示几列,liWidth是一列的宽度。