關於瀑布流

前段時間看到同窗的博客，關於工做的技術博文，裏面提到了瀑布流。

瀑布流這個東西聽到不少，也看過一些文章，不過就沒本身動手試過。沒追求，因此至今不成大器，技術一直這麼渣。。。

先看一下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 + '\n');
        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="' + imgUrl + '" />';
        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="' + imgUrl + '" />';
    //     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就是了：

 

 

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