瀑布流思路

外边一个大框相对定位，里面的div绝对定位
比如有三列，比较三列的高度，在最短的那一列排位，div的宽度都一样，高度是随机数。
效果如图：
1544614350(1).jpg
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>瀑布流</title>
    <style>
        *{
            margin: 0;
            padding: 0
        }
        #box{
            /* 大盒子固定宽度 */
            width: 1200px;
            /* 设置相对定位 */
            position: relative;
            margin: 0 auto;
        }
        #box div{
            /* 设置绝对定位 */
            position: absolute;
            /* 所有div的值是相等的 */
            width: 380px;
            margin: 10px;
            background-color: #dedede;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="box">

    </div>
</body>
<script>
//数组用来记录有几列，每一列的top值
var arr = [//H表示top的值，col表示第几列
    {
        H:0,
        col:0
    },
    {
        H:0,
        col:1
    },
    {
        H:0,
        col:2
    }

];
function waterfall() {  

//随机数 div的高是随机数
function random(a,b) {//a,b代表a到b的随机数
       return Math.floor(Math.random()*(b-a+1))+a;
}
  for(var i=0;i<50;i++){//for循环随机产生50个div
        //动态的创建div标签
        var node = document.createElement("div");
        var h = random(300,600);
        node.style.height = h+"px";
        node.innerHTML="我是图片";
        node.style.lineHeight=h+"px";
        //比较H的值
        arr.sort(function (a,b) {
            if(a.H>b.H){
                return 1;
            }
            if(a.H<b.H){
                return -1;
            }
          })
        //经过排序之后，数组里的第一个值就是最小的
        node.style.left = arr[0].col*400+"px";
        node.style.top = arr[0].H+"px";
        box.appendChild(node);
        arr[0].H+=(h+20);//H叠加的值是下一个div的top值
        //计算一下文档的高度，将叠加后的值放到数组的第一个
        arr.sort(function (a,b) {
            if(a.H<b.H){
                return 1;
            }
            if(a.H>b.H){
                return -1;
            }
          })
        box.style.height = arr[0].H+"px";
  }
}
waterfall();
window.onscroll = function () {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    var ch = window.innerHeight || document.body.clientHeight;
    if(arr[0].H == scrollTop+ch){
        waterfall();
    }
  }
</script>
</html>
瀑布流思路

推荐阅读更多精彩内容
