瀑布流之實例進階

tingke 9年前發布 | 12K 次閱讀 HTML 前端技術

來自： http://segmentfault.com/a/1190000004385117

瀑布流也應該算是流行幾年了吧。首先是由Pinterest掀起的浪潮，然后國內設計如雨后春筍般，冒出很多瀑布流的例子，比如，蘑菇街，Mark之(不過最近涉黃，好像被喝茶了),還有淘寶的 “哇哦”. 這些都是很棒的例子， 今天我想重新談起瀑布流，一是想滿足我自己的愿望，寫一個詳細的介紹(不敢自名為教程),二是，給大家一份參考，因為search很多，但是他們給的是一個插件，然后教你怎樣配置，當然，也有很多其他的大神也細心的做了很多教程，比如 imooc上面 Amy 姐姐 發布的瀑布流教程，也是很棒的。 而我的目的就是，盡量把一些常見的demo給大家講解一遍，以及，融合以前學過的設計模式，相當于一個簡單的demo.

絕對式布局

不多說，先看一個demo

絕對瀑布式布局

這個應該算是最常用的一個布局，但是他耗費的性能較高。不過，通過一些重構設計，這些都是可以避免的，我們詳細了解一下。

關于html和css，大家可以查看一下控制臺，或者直接copy一份都是可以的。

 <div class="pin">
            <div class="box">
                <img src="https://simg.open-open.com/show/d104cb79b036edf9ccaadc1d8de1766d.jpg" />
            </div>
        </div>

這是main 容器框內部的一個pin框，也是最基本的布局單元。(這里，要感謝迅雷UED提供的圖片) 而我們的頁面其實也是由pin單元拼接起來，在內部設置padding，形成間隔的效果。

.

這里就不詳細展開了。

接下來我們看一下js原理。

</div>

JS實現原理

其實瀑布式主要的難點就在于，如果將圖片整齊的排列在對應的列下，以及什么時候開始刷新加載圖片。

而圖片整齊的排列的主要邏輯和算法即，先獲取容器內可以放多少列，然后，通過計算，存放第一列的高度，再遍歷剩下(除第一列的元素)的高度，分別放入，高度最小的那一列。 逐個添加，最后結束遍歷。

開始刷新的設置就很簡單了，瀑布流刷新只和一個事件有關，即，window.onscroll. 主要的算法即，當頁面滑動到最低高度的時候開始加載節點并且添加，當然，節點添加的個數是不固定的。

先上代碼吧，我這里分3部分講解，一個是圖片的排列，一個是設置加載的位置.另外再補充一個響應式加載。

圖片排列

var $ = function() {
        return document.querySelectorAll.apply(document, arguments);
    }
    var arrHeight = []; //得到分列的高度
    var columns = function() { //計算頁面最多可以放多少列
        var containerW = $("#main")[0].clientWidth,
            pinW = $(".pin")[0].offsetWidth;
        return Math.floor(containerW / pinW);
    }
    var getIndex = function(arr) { //獲得最小高度的index
            var minHeight = Math.min.apply(null, arr); //獲得最小高度
            for (var i in arr) {
                if (arr[i] === minHeight) {
                    return i;
                }
            }
        }
        //根據列數確定第一排img的高度并放入數組當中。
    var setCenter = (function() { //通過列數設置寬度
        var main = $('#main')[0]; //獲得罩層
        var getPadding = function() { //設置padding
            var col = columns(); //獲得最后一列
            var padding = main.clientWidth - col * $('.pin')[0].offsetWidth;
            return padding / 2;
        }
        var getComputedStyle = function(ele) { //兼容IE的支持情況
            if (window.getComputedStyle) {
                return window.getComputedStyle(ele);
            } else {
                return ele.currentStyle;
            }
        }
        var getPinPad = function() { //獲得pin的padding值
            var pin = $(".pin")[0];
            return parseInt(getComputedStyle(pin).paddingLeft);
        }
        return function() { //設置寬度
            main.style.padding = `0 ${getPadding()}px 0 ${getPadding()-getPinPad()}px`;
        }
    })();
    var overLoad = function(ele) {
        var index = getIndex(arrHeight),
            minHeight = Math.min.apply(null, arrHeight), //獲取最小高度
            pins = $('.pin'),
            style = ele.style;
        style.position = "absolute";
        style.top = minHeight + "px"; //設置當前元素的高度
        style.left = pins[index].offsetLeft + "px";
        arrHeight[index] += ele.offsetHeight;
    }
    //初始化時執行函數
    var init = function() {
            var pins = $(".pin"),
                col = columns();
            setCenter(); //設置包裹容器的寬度
            for (var i = 0, pin; pin = pins[i]; i++) {
                if (i < col) { //存儲第一排的高度
                    arrHeight.push(pin.offsetHeight);
                } else {
                    overLoad(pin); //將元素的位置重排
                }
            }
        }

里面一共有7個函數(大函數),一個變量。 說一下思路吧。 首先，頁面onload之后 執行的函數是 init. 要知道，一個js程序一定有他的入口，關鍵看你怎么找了。 然后我們深入init函數體，觀察。init里面執行的業務邏輯就是 存儲第一排元素的高度，然后重排剩下的元素。 通過columns函數來獲得當前窗口最多可以放下多少列，然后設置容器的居中(通過padding設置即可). 接下來，遍歷pin的單元框，將第一排的元素高度存放在arrHeight數組里，將剩下的元素進行重排。 其他的函數覺得沒什么講解的必要了。 我們著重來看一下overLoad函數.

overLoad

</div>

var overLoad = function(ele) {
        var index = getIndex(arrHeight),
            minHeight = Math.min.apply(null, arrHeight), //獲取最小高度
            pins = $('.pin'),
            style = ele.style;
        style.position = "absolute";
        style.top = minHeight + "px"; //設置當前元素的高度
        style.left = pins[index].offsetLeft + "px";
        arrHeight[index] += ele.offsetHeight;
    }

在overLoad里面有getIndex函數，獲取最小高度的index,然后就可以設置傳入進來的ele元素的位置(絕對定位), top為數組中最小高度的px值，left就為第一排制定的Index元素的左邊距位置。 最后更新一下高度，ok!!! that's enough.

設置加載位置

</div>

var dataInt = [{
        'src': '1.jpg'
    }, {
        'src': '2.jpg'
    }, {
        'src': '3.jpg'
    }, {
        'src': '4.jpg'
    }, {
        'src': '1.jpg'
    }, {
        'src': '2.jpg'
    }, {
        'src': '3.jpg'
    }, {
        'src': '4.jpg'
    }];



function isLoad() { //是否可以進行加載
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
        wholeHeight = document.documentElement.clientHeight || document.body.clientHeight,
        point = scrollTop + wholeHeight; //頁面底部距離header的距離
    var arr = $('.pin');
    var lastHei = arr[arr.length - 1].getBoundingClientRect().top;
    return (lastHei < point) ? true : false;
}
//處理滑動
var dealScroll = (function() {
    var main = $('#main')[0],
        flag = true;
    return function() {
        if (isLoad() && flag) {
            for (var i = 0, data; data = dataInt[i++];) {
                var div = document.createElement('div');
                div.innerHTML = temp(data.src);
                div.className = "pin";
                main.appendChild(div);
                overLoad(div); //和上面的overload有耦合性質
            }
            flag = false;
            setTimeout(function() { //控制滑行手速，時間越長對速度的滑動時間影響越大。
                flag = true;
            }, 200);
        }
    }
})();

function temp(src) {
    return `
    <div class="box">
        <img src="http://cued.xunlei.com/demos/publ/img/P_00${src}"/>
    </div>
`;
}</pre> 



其實，精華就在上一部分，這個只是作為一個加載數據的手段，當然，你可以點擊加載(手動觸發)，或者其他的加載方法。 當然，怎么設置完全是取決于你的。 所以，隨大流，依然是通過下滑滾動加載。 繼續，找入口函數->dealScroll. 該函數執行的任務就是，通過isload函數,判斷是否可以進行加載判斷。 我們看一下isload函數，這個就是滾動加載的關鍵點.
 function isLoad() { //是否可以進行加載
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
            wholeHeight = document.documentElement.clientHeight || document.body.clientHeight,
            point = scrollTop + wholeHeight; //頁面底部距離header的距離
        var arr = $('.pin');
        var lastHei = arr[arr.length - 1].getBoundingClientRect().top;
        return (lastHei < point) ? true : false;
    }
 
 
 
  
通過計算得出，頁面底部距視口的位置(工具條下部) 與 最后一個元素的絕對位置比較，如果 滑動距離超過，則啟用加載。


yeah~ That's over.
back to dealScroll
接下來就是看加載的部分了，這個部分其實也沒什么說的，就是創建一個div節點，然后將他放到容器的最后，并且通過overLoad函數來處理該節點的位置。 另外在該函數的末尾，我設置了一個控制滑動速度的trick,通過對函數的節流，防止有時候，請求過慢，用戶重復發送請求，造成資源浪費。
然后，這一部分也可以告一段落了。
 響應式 
最后一部分就是響應式了， 這部分，也超級簡單，只要你封裝性做的好，其實這一部分就是添加一個resize事件就over了。我們繼續找入口函數。
</div>


    var resize = (function() {
            var flag;
            return function(fn) {
                clearTimeout(flag);
                flag = setTimeout(function() { //函數的節流,防止用戶過度移動
                    fn();
                    console.log("ok")
                }, 500);
            }
})();
 
 
 同樣，這里使用到了函數節流的思想，要知道，作為一個程序員，永遠不要以為 用戶 干不出什么 傻事 . 比如，沒事的時候拖著瀏覽器窗口玩，放大，縮小，再放大... 其實，這事我經常干，因為沒有女朋友，寫代碼寫累了，就拖瀏覽器玩。 所以，考慮到我們單身狗的需求，使用函數節流是非常有必要的。 感興趣的童鞋，可以參考我前面的文章，進行學習。 說明一下，這里的回調函數指的就是init函數，但是 需要對init做些改動。詳見。 


 var update = function(ele) { //當resize的時候，重新設置
        ele.style.position = "initial";
    }
    //初始化時執行函數
    var init = function() {
            var pins = $(".pin"),
                col = columns();
            arrHeight = []; //清空高度
            setCenter(); //設置包裹容器的寬度
            for (var i = 0, pin; pin = pins[i]; i++) {
                if (i < col) { //存儲第一排的高度
                    arrHeight.push(pin.offsetHeight);
                    update(pin);
                } else {
                    overLoad(pin); //將元素的位置重排
                }
            }
        }
 
 
 
  
上面需要加入update,對新的第一排元素進行更新。


然后就可以直接搬過來使用即可。
這就是絕對是布局的大部分內容了。
總結一下吧，這個部分我應該是，重構Amy的例子的，總的來說是遵循了，最少知識原則的，一個函數盡量不帶參數，就一定不帶參數了. 還有就是 一個函數 的書寫，不超過33行，并且盡量的實現細粒度表達，實現函數的重用。 當然，我寫的這一部分還是有很多問題的，js組織結構還是比較混論的，一些hack直接與主要業務邏輯放在一起。 我也相信，讀者們肯定有自己獨特的見解，寫出來的代碼，肯定比我好太多!!! (這個是肯定的.)
</div>


列式布局
 
  
同樣，先看demo.


  
 列式瀑布流 


  
我們對比一下上面的，絕對式布局。 一個很大的卻別就是，頁面的計算量大大降低。 什么意思呢？ 即，頁面重繪的次數減少，操作節點數減少，頁面布局更加清晰。


  
首先我們來看一下他的html內容。我這里就不貼出全部了，同樣，只列出一個基本單元。


 
<div id="container">
        <span class="column">
        <span class="panel">
                    <img src="https://simg.open-open.com/show/d113759b95b5344be2a1f66b0ae6704d.jpg" alt="">
                    <p></p>
                </span>
            </span>
            </div>
 
 
上面就是一個基本的單元，需要注意的是，我們需要設置一個column表示一列。而span.panel就是一個基本磚塊。好了，不在這地方磨嘰了。我們再來看一下scss. 


$font:10px/1.5 sans-serif,"Microsoft YaHei","Arial";
html,body{
    height: 100%;
    width: 100%;
    font:$font;
    background-color: #eee;
}


container{



width:100%;
height: 100%;
position: relative;
text-align: center;



}
.column{
    display: inline-block;
    width:210px;
    vertical-align: top;
    padding:0 10px;
    .panel{
        padding: 10px 0 10px 0;
        display: block;
        text-align: center;
        margin-bottom: 10px;
        border: 1px solid #ccc;
        background-color: #fff;
        text-decoration: none;
    }
}</pre> 
 
這我也不磨嘰了，scss這里需要引入normalize.scss進行和諧處理。html和css介紹完了，我們要開始搬磚了。 


JS原理
 
  
 上面說了，列式布局簡直算是完虐 絕對式布局 . 絕對式布局，簡直就像10元/天 的搬磚工。而列式布局就是站在那看他搬磚的監工。 同樣都是搬磚的，一個賣苦力，一個秀智商。簡直了！！！ 


  
聽了逼逼，我們來直面一下慘淡的人生。


  
列式布局的原理其實和絕對式布局沒有太大的卻別。


  
同樣也有3個部分， 一是頁面加載自適應，二是滑動加載，三是響應式布局。


  
分別講解:


 
加載自適應
我們先看一下代碼吧:
var $ = function() {  //一個hacks
    return document.querySelectorAll.apply(document, arguments);
}
var waterFall = (function(){
    //初始化布局
    var arrHeight = []; //列的高度
    var columns = function() { //計算頁面最多可以放多少列
            var bodyW = $('#container')[0].clientWidth,
                pinW = $(".column")[0].offsetWidth;
            return Math.floor(bodyW / pinW);
        }
        //設置瀑布流居中
    var getHtml = function() {
            var cols = $('.column'), //獲得已有的列數
                arrHtml = [];
            for (var i = 0, col; col = cols[i++];) {
                var htmls = col.innerHTML.match(/<img(?:.|\n|\r|\s)*?p>/gi); //獲取一個columns的
                arrHtml = arrHtml.concat(htmls);
            }
            return arrHtml;
        }
        //獲得數組中最低的高度
    var getMinIndex = function() { //獲得最小高度的index
        var minHeight = Math.min.apply(null, arrHeight); //獲得最小高度
        for (var i in arrHeight) {
            if (arrHeight[i] === minHeight) {
                return i;
            }
        }
    }
    var createCol = function() {
            var cols = columns(), //獲得列數
                contain = $("#container")[0];
            contain.innerHTML = ''; //清空數據
            for (var i = 0; i < cols; i++) {
                var span = document.createElement("span");
                span.className = "column";
                contain.appendChild(span);
            }
        }
        //初始化列的高度
    var initHeight = function() {
            var cols = columns(),
                arr = [];
            for (var i = 0; i < cols; i++) {
                arr.push(0);
            }
            arrHeight = arr;
        }
     //創建一個ele并且添加到最小位置
    var createArticle = function(html){
        var cols = $('.column'),
            index = getMinIndex(),
            ele = document.createElement('article');
        ele.className = "panel";;
        ele.innerHTML = html;
        cols[index].appendChild(ele);
        arrHeight[index] += ele.clientHeight;
    }
    //遍歷獲得的html然后添加到頁面中
    var reloadImg = function(htmls) {
        for (var i = 0, html, index; html = htmls[i++];) {
            createArticle(html);
        }



}
var onload = function() {
        var contain = $("#container")[0], //獲得容器
            arrHtml = getHtml(); //獲得現有的所有瀑布流塊
        //創建列，然后進行加載
        createCol();
        //初始化arrHeight
        initHeight();
        //進行頁面的重繪
        reloadImg(arrHtml);
        return this;
    }



})();</pre> 
 
 
  
看見一個程序，先找他的入口函數，顯然，一開始應該是onload，那么，觀察onload函數. 可以發現，里面一共有4個函數.


由于用戶的寬度不確定，所以我們的列數也不是一定的。這時候，就需要獲取實際尺寸然后進行一個計算才行。然后需要對原有的數據，進行重排。
所以，getHtml就是來獲取一開始的原有數據(innerHTML);
然后就可以更具寬度來添加列了。
createCol函數就是更具寬度來添加列的。
這時候，我們需要一個數組(arrHeight)來保存每列的高(默認都為0).
然后就可以進行頁面重排=>reloadImg(arrHtml), arrHtml就是原始數據。
好，我們這里初級搬磚完成。
接下來，是要開始加固了。
</div>


滑動加載
這個應該算是我直接copy過來的，所以說，函數寫的好，重用性也是棒棒噠。
 
  
show u code


 
 var isLoad=function() { //是否可以進行加載
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
            wholeHeight = document.documentElement.clientHeight || document.body.clientHeight,
            point = scrollTop + wholeHeight; //頁面底部距離header的距離
        var lastHei = Math.min.apply(null,arrHeight);
        return (lastHei < point) ? true : false;
    }



var dealScroll = (function(){
    window.onscroll = ()=>{dealScroll();}
    var container = $('#container')[0];
    return function(){
        if(isLoad()){
            for(var i = 0,html,data;data = dataInt[i++]; ){
                html = tpl.temp(data.src); //獲得數據然后添加模板
                createArticle(html);
            }
        }
        return this;
    }
})();</pre> 



同樣的isload，同樣的dealScroll的邏輯。 這里需要說明的就是，createArticle就是給最低高度列添加磚塊的函數。然后，就沒有然后啦. 
響應式布局
這個我也是直接copy過來的。
 var resize = (function(){
        window.onresize = ()=>{resize();};
        var flag;
        return function(){
            clearTimeout(flag);
            flag = setTimeout(()=>{onload();},500);
            return this;
        }
 
 
需要說明的是，onload,dealScroll,resize這3個函數，后面我都加上"return this". 目的是可以進行鏈式調用，以備后面重用性的需要。


最后說兩句
 
  
響應式布局的流行真的很突然，慢慢的，慢慢的我沒有防備。 感覺在11年和12年的時候簡直就是一種風尚，而現在回味過來，看這個布局方法，感覺精髓依在的。 我們也可以進行變通，我們可以往右滑，右邊節點增加。 獲得抖抖手機，節點增加，這些都是可以完成的。(因為主要的邏輯我們已經有了，只是判斷增加的方式變了而已)。


  
 我這里寫的一部分內容，應該算是(云網頁)吧。 大家有興趣可以直接拷貝到自己的IDE或者 Sublime 里面進行測試，數據都是放在云端的。 


  
大家如果真的對前端有興趣的話，造輪子就是一個最好的辦法。就像我們小時候做計算題，事實上這些題目早就有了，已經有無數人做過。那我們做還有什么意義呢？ 如果你這樣想的話，你已經把你自己給平庸化了(不是平凡化)。 你抱著的是一個，這個別人做過了，我做了又沒有什么用，還沒有別人做的好，我不想做。。。 但是，有沒有想過，為什么你叫這個名字，你為什么在這個城市長大，為什么能看到我寫的這篇文章。 因為道理很簡單，你就是一個很獨特的人， 你做的任何事情都是不可復制的。 當你寫瀑布流的時候，你瀏覽的網站，看過的資料，寫的代碼。這些串聯起來都是你最獨特的flag。 所以，造輪子不是waste 而恰恰相反是worthy，同樣就是code review一樣。只有自己做過才知道，這個東西，我真的知道。


 

 
                    

                    

                        
 本文由用戶 tingke 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

                        
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

                        
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

                        
                        
                    


                

                

                    

                        
相關經驗

                        
                    

                    

                        
相關資訊

                        
                    

                    

                        
相關文檔