瀑布流

发布于:2018-01-18 09:56:59

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <style>
        div.item{
            position: absolute;
            width: 200px;
            margin: 10px;
            transition: all 1s;
        }
        div#content{
            position: relative;

        }
        .part1{
            background-color: yellow;
            height: 200px;
        }
        .part2{
            background-color: lightblue;
            height: 400px;
        }
        .part3{
            background-color: pink;
            height: 300px;
        }
    </style>
</head>
<body>
<div id="content">
    <div class="item part1">1</div>
    <div class="item part2">2</div>
    <div class="item part3">3</div>
    <div class="item part1">4</div>
    <div class="item part1">5</div>
    <div class="item part2">6</div>
    <div class="item part2">7</div>
    <div class="item part3">8</div>
    <div class="item part1">9</div>
    <div class="item part2">10</div>
    <div class="item part2">11</div>
    <div class="item part2">12</div>
    <div class="item part3">13</div>
    <div class="item part3">14</div>
</div>



<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>

<script>
    function waterFall(elm) {
        var $el = $(elm);
        var widthNum=parseInt($el.width()/$el.children().outerWidth(true)),
        allHeight=new Array(widthNum);
        for (var i=0;i<widthNum;i++){
            allHeight[i]=0;
        }
        console.log(allHeight);
        $el.children().each(function(){
            var $cur=$(this),indx=0, minAllHeight=allHeight[0];
            for (var j=0;j<allHeight.length;j++){
                if(allHeight[j]<minAllHeight){
                    minAllHeight=allHeight[j];
                    indx=j;
                }
            }
            $cur.css({
                "left":indx*$cur.outerWidth(true),
                "top":minAllHeight
            });
            allHeight[indx]=minAllHeight+$cur.outerHeight(true);
        })
        $el.height(Math.max.apply(null, allHeight));
    }
    waterFall('#content');
    $(window).on("resize",function () {
        waterFall('#content');
    })
</script>
</body>
</html>


觉得有用请点个赞吧!
6 638