JS实现瀑布流布局

瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式。视觉表现为参差不齐的多栏布局，最早采用此布局的是网站是 Pinterest，后逐渐在国内流行。

瀑布流布局效果

image

即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。

那么规则是什么呢？
下面通过图解来分析一下瀑布流的算法。

图解瀑布流算法

当第一排排满足够多的等宽图片时（如下图情况），自然而然的考虑到之后放置的图片会往下面排放。

image

那么第六张图片，放置在什么位置呢？是下图的位置么？

image

我们通过瀑布流算法实验得到，后面紧跟的第六张图片的位置应该是这个位置。

image

为什么呢？
因为放置它之前，这一列的高度为所有列中最小，所以会放置在这个地方。
所以我们知道了，如果再继续放置下去，第七张图片应该是这个位置，对吗？

image

通过瀑布流算法实验得出位置正确。看懂这个图示应该就能理解了瀑布流的原理算法。

image

JS 实现代码

window.onload = function () {
    var wapper = document.querySelector('.wapper')
    window.onscroll = function () { //滚动条事件
        if (isOk()) { //判断可以执行图片时
            for (var i in data.dataimg) { //循环数据库写入
                wapper.innerHTML += ` <div class="box">
                <div class="plic">
                    <img src="./images/${data.dataimg[i].src}.jpg" alt="">
                </div>
            </div>`
            }
            shunxu() //调用排序方式
        }
    }

    shunxu()

    function shunxu() { //封装图片排列顺序
        var wapper = document.querySelector('.wapper');
        var html_w = document.documentElement.clientWidth || document.body.clientWidth; //获取页面宽度
        var boxs = document.querySelectorAll('.box');
        var box_w = boxs[0].offsetWidth; //获取单张图片的宽度
        var cols = Math.floor(html_w / box_w); //计算第一排的图片数量
        wapper.style.width = box_w * cols + 'px'; //重新给wapper定义宽度
        var arr = []; //声明一个空数组，放第一排图片的高度
        for (var i = 0; i < boxs.length; i++) { //循环所有图片
            if (i < cols) { //判断第一排的图片
                arr.push(boxs[i].offsetHeight); //高度放入空数组
            } else { //反之不是第一排的
                var minH = Math.min.apply(Math, arr); //最低高度（数组找最小数的方法）
                var ind = arr.indexOf(minH); //通过高度找出下标
                boxs[i].style = `position:absolute;left:${ind * box_w}px;top:${minH}px`;
                //定位，left值为下标*图片的宽度，top值为最低高度
                arr[ind] += boxs[i].offsetHeight;
                //加入图片后更新arr的数据

            }
        }

    }


    function isOk() { //封装图片是否要加载
        var boxs = document.querySelectorAll('.box');
        var screen_h = document.documentElement.clientHeight || document.body.clientHeight; //可视区窗口高度
        var scroll_t = document.documentElement.scrollTop || document.body.scrollTop; //滚动条高度
        var top = screen_h + scroll_t; //top值
        var last_img = boxs[boxs.length - 1].offsetTop + boxs[boxs.length - 1].clientHeight / 2;//最后一张图片距顶部的高度
        //总top值大于最后一张图片距顶部的高度吗，大于了就true，否则false
        return top > last_img ? true : false;

    }
}