前段時間看到同學的博客，關于工作的技術博文，里面提到了瀑布流。

瀑布流這個東西聽到很多，也看過一些文章，不過就沒自己動手試過。沒追求，所以至今不成大器，技術一直這么渣。。。

先看一下demo

瀑布流的幾種常見實現方式：

1）傳統多列布局（本文采用這種）

2）css3定義

3）絕對定位

寫這個demo的時候，最多的是參考張鑫旭大神的文章http://www.zhangxinxu.com/wordpress/?p=2308，所以demo的圖片來源也是效仿他的，從迅雷UED取的~~

代碼：

var Waterfall = (function() {

    var colNum = 3,        //列數
        imgRoot = 'http://cued.xunlei.com/demos/publ/img/',     //圖片路徑

        imgIndex = 0,    //當前圖片索引
        perNum = 9,        //每次請求圖片數
        totalImg = 160;        //圖片總數


    function $(id) {
        return document.getElementById(id);
    }

    //獲取最短列
    function colShortest() {
        var shortest = 0;
    //    console.log(shortest + ':  ' + $('col' + shortest).offsetHeight);
        for(var i = 1; i < colNum; i += 1) {
    //        console.log(i + ':  ' + $('col' + i).offsetHeight);
            if($('col' + i).offsetHeight < $('col' + shortest).offsetHeight) {
                shortest = i;
            }
        }
    //    console.log('shortest: ' + shortest + '
');
        return shortest;
    }

    //獲取當前需要圖片url
    function getImgUrl() {
        var index = imgIndex;
        if(imgIndex < 10) {    
            index = '00' + imgIndex;
        }else if(imgIndex < 100) {
            index = '0' + imgIndex;
        }
        return imgRoot + 'P_' + index + '.jpg';
     }

     //每滾動到頁面底部就更新一下頁面
     function render() {
         if(isToBottom()) {
            $('loading').style.display = 'block';
            appendItem(perNum);    
        }
    }
        

     //創建一個項
     function createItem() {
         var frag = document.createDocumentFragment(),
             div = document.createElement('div'),
            imgUrl = getImgUrl(),
            img = '<img src="'%20+%20imgUrl%20+%20'" />';
        div.className = 'item';
        div.innerHTML = img;
        frag.appendChild(div);
        return frag;
     }

     //append num個圖片
     function appendItem(num) {
         var newItem = [];
         for(var i = 0; i < num; i += 1) {
             if(totalImg >= 0) {
                 newItem.push(createItem());
                 imgIndex += 1;
                totalImg -= 1;
             }
         }
         var curCol = 0;
         for(var i = 0, len = newItem.length; i < len; i += 1) {
             if(curCol >= colNum) {
                 curCol = 0;
             }
             $('col' + curCol).appendChild(newItem[i]);
         //     $('col' + colShortest()).appendChild(newItem[i]);
             curCol += 1;
         }
         $('loading').style.display = 'none';
     }
     //增加一個圖片項
    // function appendItem() {
    //     var frag = document.createDocumentFragment(),
    //         div = document.createElement('div'),
    //         imgUrl = getImgUrl(),
    //         image = new Image(),
    //         img = '<img src="'%20+%20imgUrl%20+%20'" />';
    //     div.className = 'item';
    //     div.innerHTML = img;
    //     frag.appendChild(div);
    //     colShortest().appendChild(frag);        
    // }

    //判斷是否滾動到底部
    function isToBottom() {
        var scrollT = document.body.scrollTop || document.documentElement.scrollTop,    //滾動高度
            winH =document.documentElement.clientHeight,        //窗口可視高度
            bodyH = document.body.offsetHeight;    //正文高度

        if((bodyH - scrollT) <= (winH + 10)) {
            return true;
        }
        return false;

    }
    //初始化
    function init() {
        appendItem(15);    //先加載15張圖片
        window.onscroll = function() {        //滾動事件
            render();
        }
    }

    return {
        init:init
    } 

})();

Waterfall.init();

在寫這個demo的過程中遇到了一個問題，就是原本思路每次取9張圖片，然后循環插入到當前最短列中去，但是。。。我果然想得太簡單了，真實情況它會將9張圖片全部插入到同一列中，根本原因是在計算最短列的時候，之前插入的圖片還沒插好所以計算的時候沒有算到，導致最短列經常是同一個。。。所以，改了，改成將取到的圖片分別插入不同列。這樣的話，雖然均勻了一點，但是還是存在問題，因為這樣的插入法就是說每一個差不多有同樣多張的圖片，如果某一列中長的圖片比較多，某一列中短的圖片又比較多的話，那么，最終長度也會參差不齊的。。。現在這個demo就是了：

很簡陋的一個瀑布流，代碼很水，還要改進

總結

以上是生活随笔為你收集整理的关于瀑布流的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。