瀑布流，又稱瀑布流式布局。是比較流行的一種網(wǎng)站頁(yè)面布局，視覺表現(xiàn)為參差不齊的多欄布局，隨著頁(yè)面[滾動(dòng)條]向下滾動(dòng)，這種布局還會(huì)不斷加載[數(shù)據(jù)塊]并附加至當(dāng)前尾部。最早采用此布局的網(wǎng)站是[Pinterest]，逐漸在國(guó)內(nèi)流行開來。國(guó)內(nèi)大多數(shù)清新站基本為這類風(fēng)格。

1特點(diǎn)

1、琳瑯滿目：整版以圖片為主，大小不一的圖片按照一定的規(guī)律排列。

瀑布流效果

3、操作簡(jiǎn)單：在瀏覽網(wǎng)站的時(shí)候只需要輕輕滑動(dòng)一下鼠標(biāo)滾輪，一切的美妙的圖片精彩便可呈現(xiàn)在你面前。

2應(yīng)用

瀑布流對(duì)于圖片的展現(xiàn)，是高效而具有吸引力的，用戶一眼掃過的快速閱讀模式可以在短時(shí)間內(nèi)獲得更多的信息量,而瀑布流里懶加載模式又避免了用戶鼠標(biāo)點(diǎn)擊的翻頁(yè)操作，瀑布流的主要特性便是錯(cuò)落有致，定寬而不定高的設(shè)計(jì)讓頁(yè)面區(qū)別于傳統(tǒng)的矩陣式圖片布局模式，巧妙的利用視覺層級(jí)，視線的任意流動(dòng)又緩解了視覺疲勞，同時(shí)給人以不拘一格的感覺，切中年輕一族的個(gè)性化心理。^[1]國(guó)內(nèi)類Pinterest網(wǎng)站也如雨后春筍般出現(xiàn)，已知網(wǎng)站超40家，類Pinterest網(wǎng)站有四種，一是電商導(dǎo)購(gòu)，如想去網(wǎng)、蘑菇街和美麗說、好享說、依托于淘寶平臺(tái);二是興趣圖譜分享，如知美、花瓣等;三是在細(xì)分垂直領(lǐng)域，如針對(duì)吃貨的零食控、針對(duì)家居行業(yè)的他部落等。四是服裝款式設(shè)計(jì)資訊平臺(tái)如看潮網(wǎng)等等。

3優(yōu)缺點(diǎn)

編輯

布局優(yōu)點(diǎn)

1. 有效的降低了界面復(fù)雜度，節(jié)省了空間：我們不再需要臃腫復(fù)雜的頁(yè)碼導(dǎo)航鏈接或按鈕了。
2. 對(duì)觸屏設(shè)備來說，交互方式更符合直覺：在移動(dòng)應(yīng)用的交互環(huán)境當(dāng)中，通過向上滑動(dòng)進(jìn)行滾屏的操作已經(jīng)成為最基本的用戶習(xí)慣，而且所需要的操作精準(zhǔn)程度遠(yuǎn)遠(yuǎn)低于點(diǎn)擊鏈接或按鈕。
3. 更高的參與度：以上兩點(diǎn)所帶來的交互便捷性可以使用戶將注意力更多的集中在內(nèi)容而不是操作上，從而讓他們更樂于沉浸在探索與瀏覽當(dāng)中。

布局缺點(diǎn)

1. 有限的用例：

無限滾動(dòng)的方式只適用于某些特定類型產(chǎn)品當(dāng)中一部分特定類型的內(nèi)容。

代碼部分

利用offsetheight,scrolltop來判斷，判斷offsetwidth可以放置的照片數(shù)量，圖片的寬度是固定的，但是高度是隨機(jī)的，第二排圖片排列的的方式是找到高度最小的那張圖片下面，利用定位然后依次排列。
window.onscroll = function () {

    var str = ''

    if (geth()) {
        for (var j in datas) {
            str += ` 
            <div class="box">
         <div class="srcs">
          <img src="${datas[j].img}" alt="">

         </div>
         </div>`
        }
        wrapper.innerHTML += str
        getThing();
    }
}
getThing()

function getThing() {
    var html_w = document.documentElement.clientWidth || document.body.clientWidth;
    var boxs = document.querySelectorAll('.box');
    // console.log(boxs)
    var img_w = boxs[0].offsetWidth;
    var num = Math.floor(html_w / img_w);
    var arr = []
    wrapper.style.width = img_w * num + 'px';
    for (var i = 0; i < boxs.length; i++) {
        if (i < num) {
            arr.push(boxs[i].offsetHeight)
        } else {
            var min_H = Math.min.apply(Math, arr);
            console.log(min_H);
            var ind = arr.indexOf(min_H);
            boxs[i].style = ` position: absolute;left:${ind*img_w}px;top:${min_H}px;`
            arr[ind] += boxs[i].offsetHeight;
        }
    }
}

function geth() {
    var boxs = document.querySelectorAll('.box')
    var h = document.documentElement.clientHeight || document.body.clientHeight;
    var top = h + document.documentElement.scrollTop || document.body.scrollTop;
    var last_h = boxs[boxs.length - 1].offsetTop + boxs[boxs.length - 1].clientHeight/2;
    // console.log(last_h,h,top)
    return top > last_h ? true : false;
}

}