瀑布流又稱瀑布流式布局顶捷，是比較流行的一種網(wǎng)站頁面布局方式柄粹。視覺表現(xiàn)為參差不齊的多欄布局匕积，最早采用此布局的是網(wǎng)站是 Pinterest，后逐漸在國內(nèi)流行扮念。

瀑布流布局效果

image

即多行等寬元素排列损搬，后面的元素依次添加到其后，等寬不等高柜与，根據(jù)圖片原比例縮放直至寬度達(dá)到我們的要求巧勤，依次按照規(guī)則放入指定位置。

那么規(guī)則是什么呢旅挤？
下面通過圖解來分析一下瀑布流的算法踢关。

圖解瀑布流算法

當(dāng)?shù)谝慌排艥M足夠多的等寬圖片時(shí)（如下圖情況），自然而然的考慮到之后放置的圖片會(huì)往下面排放粘茄。

image

那么第六張圖片签舞，放置在什么位置呢秕脓？是下圖的位置么？

image

我們通過瀑布流算法實(shí)驗(yàn)得到儒搭，后面緊跟的第六張圖片的位置應(yīng)該是這個(gè)位置吠架。

image

為什么呢？
因?yàn)榉胖盟奥辏@一列的高度為所有列中最小傍药，所以會(huì)放置在這個(gè)地方。
所以我們知道了魂仍，如果再繼續(xù)放置下去拐辽，第七張圖片應(yīng)該是這個(gè)位置，對(duì)嗎擦酌？

image

通過瀑布流算法實(shí)驗(yàn)得出位置正確俱诸。看懂這個(gè)圖示應(yīng)該就能理解了瀑布流的原理算法赊舶。

image

JS 實(shí)現(xiàn)代碼

window.onload = function () {
    var wapper = document.querySelector('.wapper')
    window.onscroll = function () { //滾動(dòng)條事件
        if (isOk()) { //判斷可以執(zhí)行圖片時(shí)
            for (var i in data.dataimg) { //循環(huán)數(shù)據(jù)庫寫入
                wapper.innerHTML += ` <div class="box">
                <div class="plic">
                    <img src="./images/${data.dataimg[i].src}.jpg" alt="">
                </div>
            </div>`
            }
            shunxu() //調(diào)用排序方式
        }
    }

    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); //計(jì)算第一排的圖片數(shù)量
        wapper.style.width = box_w * cols + 'px'; //重新給wapper定義寬度
        var arr = []; //聲明一個(gè)空數(shù)組睁搭，放第一排圖片的高度
        for (var i = 0; i < boxs.length; i++) { //循環(huán)所有圖片
            if (i < cols) { //判斷第一排的圖片
                arr.push(boxs[i].offsetHeight); //高度放入空數(shù)組
            } else { //反之不是第一排的
                var minH = Math.min.apply(Math, arr); //最低高度（數(shù)組找最小數(shù)的方法）
                var ind = arr.indexOf(minH); //通過高度找出下標(biāo)
                boxs[i].style = `position:absolute;left:${ind * box_w}px;top:${minH}px`;
                //定位，left值為下標(biāo)*圖片的寬度笼平，top值為最低高度
                arr[ind] += boxs[i].offsetHeight;
                //加入圖片后更新arr的數(shù)據(jù)

            }
        }

    }


    function isOk() { //封裝圖片是否要加載
        var boxs = document.querySelectorAll('.box');
        var screen_h = document.documentElement.clientHeight || document.body.clientHeight; //可視區(qū)窗口高度
        var scroll_t = document.documentElement.scrollTop || document.body.scrollTop; //滾動(dòng)條高度
        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;

    }
}