不确定图片高度情况下，如何实现瀑布流布局？

两种方式：
1，item使用绝对定位的；例子：
HTML

<!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>

CSS:

*{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;}

JQ:

$(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;
    }
    var re;
    window.onresize = function() {
      clearTimeout(re);
      re = setTimeout(resize,100); 
    };
});

2：item所显示图片为缩略图，缩略图生成后高度存储到数据库，前端生成页面时，写到img的style="height:XXXX"即可；但是文字内容么~~~~只能固定高度了；

不确定图片高度情况下，如何实现瀑布流布局？

相关电子书

相关实验场景