瀑布流布局思路

html方面：搭建简单框架

    <h1>waterFull</h1>
    <div class="cont">
        <div class="item"><img src="./img/img_001.jpg" alt=""></div>
        <div class="item"><img src="./img/img_002.jpg" alt=""></div>
        <div class="item"><img src="./img/img_003.jpg" alt=""></div>
        <div class="item"><img src="./img/img_004.jpg" alt=""></div>
        <div class="item"><img src="./img/img_005.jpg" alt=""></div>
        <div class="item"><img src="./img/img_006.jpg" alt=""></div>
        <div class="item"><img src="./img/img_007.jpg" alt=""></div>
        <div class="item"><img src="./img/img_008.jpg" alt=""></div>
        <div class="item"><img src="./img/img_009.jpg" alt=""></div>
        <div class="item"><img src="./img/img_010.jpg" alt=""></div>
        <div class="item"><img src="./img/img_011.jpg" alt=""></div>
        <div class="item"><img src="./img/img_012.jpg" alt=""></div>
        <div class="item"><img src="./img/img_013.jpg" alt=""></div>
    </div>

css注意点：使用定位时子绝父相

       <style>
       * {
            padding: 0;
            margin: 0;
        }
        h1 {
            text-align: center;
            line-height: 80px;
        }
        .cont {
            width: 80%;
            position: relative;
            margin: 0 auto;
        }
        .cont .item {
            position: absolute;
            border: 1px solid #cccccc;
            padding: 10px;
        }
        .item img {
            /*width: 160px;*/
            border: 1px solid lavender;
        }
        </style>

js思路
1 获取元素 容器宽度、图片盒子宽度
2 求出列数、间距
3 调用瀑布流实现布局
4 滚动加载数据

<script>
    //等所有dom完成后执行
    window.onload = function () {
        //1 获取元素 容器宽度、图片盒子宽度
        //2 求出列数、间距
        //3 调用瀑布流实现布局
        //4 滚动加载数据

        //1 获取元素 容器宽度、图片盒子宽度
            var cont = document.getElementsByClassName("cont")[0];
            var items = document.getElementsByClassName("item");
            var contW = cont.offsetWidth;
            var itemW = items[0].offsetWidth;
        //2 求出列数、间距
            var cols = parseInt(contW/itemW);
            var dist = (contW-itemW*cols)/(cols-1);
        //3 调用瀑布流实现布局
            //定义一个数组存放每列图片的高度，寻找最小值及对应的索引值
            var arrH = [];
            waterFull();
        //4 滚动加载数据
            window.onscroll = function () {
                if ( btmLoad()){
                    // console.log(1);
                    var json = [
                        {"src":"./img/img_001.jpg"},
                        {"src":"./img/img_002.jpg"},
                        {"src":"./img/img_003.jpg"},
                        {"src":"./img/img_004.jpg"},
                        {"src":"./img/img_005.jpg"},
                        {"src":"./img/img_006.jpg"},
                        {"src":"./img/img_007.jpg"},
                        {"src":"./img/img_008.jpg"},
                        {"src":"./img/img_013.jpg"}
                    ]
                    for (var i = 0; i < json.length; i++) {
                        var div = document.createElement("div");
                        div.className = "item";
                        var img = document.createElement("img");
                        img.src = json[i].src;
                        div.appendChild(img);
                        cont.appendChild(div);
                    }
                    waterFull();
                }
            }

        //滚动加载时机
            function btmLoad() {
                //屏幕高度
                    var screenH = window.innerHeight;
                //被卷曲高度
                    var contTop = window.pageYOffset;
                //最小值高度
                    var minH = getMin(arrH).value;
                    if (screenH + contTop > minH) {
                        return true;
                    }
            }

        //方法：实现瀑布流
            function waterFull() {
                for (var i = 0; i < items.length; i++) {
                    if (i < cols) {                                        //第一行实现方法
                        items[i].style.left = (itemW + dist) * i + "px";
                        arrH[i] = items[i].offsetHeight;
                    }else {                                                //从第二行第一个开始：放在第一行高度最小的后面
                        //每行图片中的高度最小值及对应的索引
                        var minHeight = getMin(arrH).value;
                        var minIndex = getMin(arrH).index;
                        items[i].style.left = (itemW + dist) * minIndex + "px";
                        items[i].style.top = minHeight + 10 + "px";
                        arrH[minIndex] = minHeight + 10 + items[i].offsetHeight;
                    }
                }
            }
            //方法：求出每行中的高度最小值寄对应的索引值
            function getMin(arr) {
                var obj = {};
                obj.value = arr[0];
                obj.index = 0;
                for (var i = 1; i < arr.length; i++) {
                    if (obj.value > arr[i]) {
                        obj.value = arr[i];
                        obj.index = i;
                    }
                }
                return obj;
            }
    }
</script>