顾名思义，我们在浏览很多网站，例如京东商城的时候，会发现我们的鼠标可以无止境的向下拉，一旦拉到网页的地步就会刷新出新的东西，这种技术被称为瀑布流，那么他到底是如何实现的呢？

话不多收，我们从头开始敲代码，边写边整理思路，共勉~

1.静态布局

*{
            margin: 0;
            padding: 0;
        }
        .pubu_head{
            text-align: center;
        }   
        .pubu_box{
            width: 1200px;
            border: 1px solid red;
            margin: 0 auto;
            overflow: hidden;   
        }
        .pubu_box img{
            display: block;
            float: left;
            width: 
        }
    </style>
</head>
<body>

    <h1 class="pubu_head">水平瀑布流</h1>
    <div class="pubu_box">
        <img src="img/pubuL_1.jpg" alt="">
        <img src="img/pubuL_2.jpg" alt="">
        <img src="img/pubuL_3.jpg" alt="">
        <img src="img/pubuL_4.jpg" alt="">
    </div>

我有一个很不好的习惯，为了方便观察与定位，我给部分div都加了边框。这里没什么可以解释的，当我们浏览网站，且没有滑到底部的时候，就会是这个样子滴。

这里图片与图片之间会有一个间距，他被称为图片解析空格。我，我们可以给img添加一个样式 display: block；

接下来我们大致需要三个步骤。
1.动态添加图片。
2.修改图片的尺寸。
3.滚动的懒加载

第二点。循环插入图片

大家都看过例如淘宝，京东等网站的商品页，他是图片大小一样的瀑布流形式。看起来整齐，写起来也很简单。

请注意，这里我给图片添加设置了尺寸200*300；

* {
            margin: 0;
            padding: 0;
        }
        .pubu_head {
            text-align: center;
        }
        .pubu_box {
            width: 816px;
            border: 1px solid red;
            margin: 0 auto;
            overflow: hidden;
        }
        .pubu_box img {
            float: left;
            width: 200px;
            height: 300px;
            border: 2px solid white;
        }

     var pbbox = document.querySelector('.pubu_box');//存储页面用的box对象
        var count = 0;//已经加载的图片数量
        var length = 16;//需要加载的图片数量
        var imgList = [];
        var line = 4;//每一行放四张图片
        // var maxWidth = window.innerWidth - 20;

        function addImg(i) {//循环添加图片
            var img = document.createElement('img');
            img.src = 'img/pubul_' + i + '.jpg';
            imgList.push(img);    //所有添加的图片，放到imglist里
            pbbox.appendChild(img);
            img.onload = function () {
                img.prop = img.height / img.width;//高宽比例
                count++;
                // console.log(img.prop);
                if (count == length) {
                    fomate();
                }
            }
        }
        for (var i = 1; i < length + 1; i++) {//循环i次
            addImg(i);
        }

jquery瀑布流效果 js实现瀑布流效果_jquery瀑布流效果

效果大概是这样的，但是，就像做数学题，我写的只是特例，如果图片的尺寸不一致怎么办？所以我们需要对它进行加工。我们要见他加工成，高度一致等比例的图片。

//2.调整图片的尺寸，首先要记录图片,调整图片
        function fomate() {
            var row = Math.floor(length / line);//行数 
            for (var i = 0; i < row; i++) {
                var w = 0;//每行的宽度
                for (var j = 0; j < line; j++) {
                    w += imgList[i * 4 + j].prop * 300;//单张图片为300高的时候，每一行所累积的宽度

                }
                // w/1200 = 300 / h;这是一个 等比例 的思想
                var h = 1000 * 300 / w;
                // console.log(h)        
                for (var j = 0; j < line; j++) {
                    imgList[i * 4 + j].style.height = h + 'px';
                    imgList[i * 4 + j].style.width = h * imgList[i * 4 + j].prop + 'px';
                }
            }
        }

此时我们可以将css样式有关img的尺寸删除。

jquery瀑布流效果 js实现瀑布流效果_瀑布流_02

我截取了上下两行相接的部分，大家可以看到，同一张图片也可以不一样大， 但是每一行的高度都是想等的。

第三步、做到懒加载

我们换位思考，什么时候瀑布流会得到体现？那就是当用户鼠标向下滑动到底部的时候。所以我们要在滚动轮，滑动距离上做文章。

window.onscroll = function () {
            var scroll = document.documentElement.scrollTop;//滚动的距离
            var screen = window.innerHeight;//屏幕的高度
            var offsetTop = pbbox.offsetTop;//盒子的距离
            var height = pbbox.offsetHeight;
            console.log(scroll + screen - offsetTop - height);
            var zhi = scroll + screen - offsetTop - height;
            if (zhi >= -20) {
                add_img(16)
            }
        }

        function add_img(n) {
            length += n;
            for (var i = 1; i < n + 1; i++) {//循环i次
                addImg(i);
            }
        }

这里因为篇幅的问题，我没有将全部代码粘过来，而且这个偷懒的瀑布流还有很多缺陷，比如没有做到响应式等等。希望能帮助到大家，我们共勉