瀑布流代码实现（绝对定位）

2016-02-16 本文已影响1283人 webCoder

w> 瀑布流是页面展示中十分常见的一种布局方式，利用这种布局，网页会显得十分好看。
瀑布流元素最大的特点是等宽不等高，下面我一步步来分析如何实现瀑布流。

1.首先，我们准备一些图片，以及把基础的html+css代码写好（因为这步很简单，所以我就直接贴代码了）。

页面初始效果

pic1.png

网页结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="container">
        <div class="box">
            <div class="box-img">
                <img src="img1.jpg" alt="pic1">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="img2.jpg" alt="pic2">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="img3.jpg" alt="pic3">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="img4.jpg" alt="pic4">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="img5.jpg" alt="pic5">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="img6.jpg" alt="pic6">
            </div>
        </div>
    </div>
</body>
</html>

*{margin: 0;padding: 0;}
.container{position: relative;width: 1040px;margin: 0 auto;}
.box{float: left;padding: 5px;font-size: 0;}
.box-img img{width: 250px;}

2.实现瀑布流效果

原理：
1.根据所设的宽度，获得每一行可以放几列（我的列子中是写死的，一行放4列）；
2.获取每个元素的高度，保存在数组中；
3.从第一个元素依次设置每个元素的定位：
   3.1 先获得这个元素该放在第几列（现有高度最小的列），通过下面的getMinHeightCol函数;
   3.2 根据每列的宽以及每列的当前高度，设置元素的left,top值（当然也要设置position:absolute）;
   3.3 重新修改每列的当前高度（为了3.1获得最新的“高度最小的列”）；

js代码（依赖jquery）

$(function(){
    var elesHeight = [];//每个元素的宽度
    var colsHeight = [0,0,0,0]; //每列元素现有的高度
    $(".container .box").each(function(index,item){
        var eleHeight = $(this).height();
        elesHeight.push(eleHeight);
    });

    //依次摆放每一个元素
    $(".container .box").each(function(index,item){

        //获得该元素应该在第几列
        var colShould = getMinHeightCol(colsHeight);

        var tempTop = colsHeight[colShould];
        var tempLeft = colShould*260;
        $(this).css({"position":"absolute","top":tempTop+"px",left:tempLeft+"px"});

        //同时将该列的高度加上当前新增元素的高度
        colsHeight[colShould] += $(this).height();
    });

    //得到四列中高度最小的那一列
    function getMinHeightCol(arr){
        var minHeight = Math.min.apply(null, arr);
        console.log("最小高度:"+minHeight);
        for(var i in arr){
            if(arr[i]==minHeight){
                return i;
            }
        }
        //默认第一列
        return 0;
    }

});

页面效果

pic2.png

上面只是简单的瀑布流实现，一个完整的瀑布流应该也具备下面的几个特点：

列数根据页面宽度和每列的宽度自动计算得来；
窗口大小改变时，重新计算元素布局的位置；
解决——窗口大小快速变化时，会不断地触发事件，造成的大量的性能消耗。

针对第三个问题的setTimeout解决方法：
窗口变化之后开始计时，如果窗口还在变换则从新开始计时，窗口不再变化则延时（很短的时间）触发重排事件。
var re;
window.onresize = function() {
    clearTimeout(re);
    re = setTimeout(resize,100); 
};

剩余的优化，自己动手尝试吧~

瀑布流代码实现（绝对定位）

猜你喜欢

热点阅读