瀑布流

思路还是很简单
（1）先初始化一个数组，找到最小的值和它的索引，
（2）根据这两个值设置div的位置（距离左边和顶部）
（3）最后把数组对应索引位置高度加上此节点高度，继续循环
<html><head>
    <meta charset="utf-8">
    <title>瀑布流</title>
    <style>

        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        ul li {
            list-style: none;
        }

        .clearfix {
            *zoom: 1;
        }

        .clearfix:after {
            display: block;
            content: '';
            clear: both;
        }

        a {
            text-decoration: none;
            color: #333;
            font-size: 14px;
        }


      

        .content {
            position: relative;
        }

        .item {
            position: absolute;
            width: 200px;
            margin-right: 10px;
            margin-top: 10px;
            transition: all 1s;
        }

        .h1 {
            height: 200px;
            background-color: #f4b300;
        }

        .h2 {
            height: 300px;
            background-color: #691bb8;
        }

        .h3 {
            height: 400px;
            background-color: #006ac1;
        }

        .img-preview {
            width: 1000px;
            margin: 0 auto;
        }

        .img-row {
            margin-bottom: 8px;
        }

        .img-row:after {
            content: "";
            display: block;
            clear: both;
        }

        .img-box {
            float: left;
        }

        .img-line .img-box:first-child {
            padding-left: 0;
        }

    </style>
</head>
<body>
<div class="content">
    <div class="item h1" style="left: 0px; top: 0px;">1</div>
    <div class="item h3" style="left: 210px; top: 0px;">2</div>
    <div class="item h2" style="left: 420px; top: 0px;">3</div>
    <div class="item h1" style="left: 630px; top: 0px;">4</div>
    <div class="item h1" style="left: 840px; top: 0px;">5</div>
    <div class="item h3" style="left: 1050px; top: 0px;">6</div>
    <div class="item h3" style="left: 1260px; top: 0px;">7</div>
    <div class="item h2" style="left: 1470px; top: 0px;">8</div>
    <div class="item h1" style="left: 0px; top: 210px;">9</div>
    <div class="item h3" style="left: 630px; top: 210px;">10</div>
    <div class="item h3" style="left: 840px; top: 210px;">11</div>
    <div class="item h3" style="left: 420px; top: 310px;">12</div>
    <div class="item h2" style="left: 1470px; top: 310px;">13</div>
    <div class="item h2" style="left: 210px; top: 410px;">14</div>
    <div id="load-more"></div>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
    $(window).on('resize', function () {
        render();
    });
    function render() {
        var ctWidth = $(window).width()
                , itemWidth = $('.item').outerWidth(true)
                , colNum = Math.floor(ctWidth / itemWidth);
        var colSumHeight = [];
        for (var i = 0; i < colNum; i++) {
            colSumHeight.push(0);
        }
        $('.item').each(function () {
            var $node = $(this);
            var idx = 0,
                    minSumHeight = colSumHeight[0];
            for (var i = 0; i < colSumHeight.length; i++) {
                if (colSumHeight[i] < minSumHeight) {
                    idx = i;
                    minSumHeight = colSumHeight[i];
                }
            }
            $node.css({
                left: itemWidth * idx,
                top: minSumHeight
            });
            colSumHeight[idx] = $node.outerHeight(true) + colSumHeight[idx];
        })
    }
    render();
</script>

</body></html>
推荐阅读更多精彩内容
