您的位置：首页 > Web前端 > JavaScript

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

2015-08-27 22:34 821 查看

先看所谓的瀑布流布局

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

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

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

说一下大体思路(也是看了别人的):
一切的不对齐都是从第一行的图片排列开始的，也许不是很准确，那么换一个说法：
要想使图片排列整齐，那么就得从第一行排列开始。
假设第一行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是一列的宽度。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航