JS瀑布流技術總結

JS瀑布流技術總結

教程及代碼來自極客學院http://www.jikexueyuan.com/course/218_3.html?ss=1

使用JS做瀑布流效果，最重要的技術要點是將所有圖片中每一欄（column）看成一個整體，以第一行的圖片高度作爲基本基調，以後每安排一個圖片的位置，都要查找之前圖片整體中哪一欄的整體高度最小，把圖片放在那一欄下面，然後更新那一欄的整體高度；下一張圖片再次整體遍歷各圖片欄的高度，找出最小高度圖片欄，以此類推。

基本步驟：

1. 獲得整體圖片的container，將container中所有id爲box的標籤儲存到一個數組中

2. 獲得一張圖片的寬度（前提要在CSS中將所有圖片的寬度設爲一致），然後通過Math的floor方法計算出一個屏幕寬度內最多能放多少圖片，以奠定第一行的基礎

3. 用一個數組儲存所有圖片欄的高度（在遍歷中，第一次遍歷儲存了第一行所有圖片的高度），當i大於等於欄的數目時，開始所有圖片的自適應

4. 在自適應中，使用Math.min.apply的方法找出所有圖片中最小那欄的整體高度，然後找出所有圖片中最小整體高度的圖品欄最後的一個圖片，獲取該圖片距離top和left的數據

5. 最後記得更新圖片欄高度

window.onload = function(){
    imgLocation('container','box');
};

function imgLocation(parent, content){
    var cparent = document.getElementById(parent);//獲得container
    var ccontent = getChildElement(cparent, content);//使用函數獲得container裏面所有id爲box的標籤
    var imgWidth = ccontent[0].offsetWidth;//獲得一個圖片的寬度，以計算一個屏幕寬度裏改放多少圖片
    var cols = Math.floor(document.documentElement.clientWidth / imgWidth);//用floor方法將col轉換爲整數
    cparent.style.cssText = 'width:'+imgWidth*cols +'px;margin:0 auto;';//將container的寬度換爲欄數*圖片寬度

    //下面開始讓所有圖片的height適應
    var BoxHeightArr=[];//數組儲存所有圖片欄的高度
    for(var i = 0; i< ccontent.length; i++)
    {
        //第一行
        if(i<cols) {
            BoxHeightArr.push(ccontent[i].offsetHeight);
        }else{
            var minHeight = Math.min.apply(null, BoxHeightArr);//找出所有圖片中最小那欄的整體高度
            var minIndex = getminheightLocation(BoxHeightArr, minHeight);//找出所有圖片中最小整體高度那欄圖片的最後一張的index

            ccontent[i].style.position = 'absolute';
            ccontent[i].style.top = minHeight +'px';
            ccontent[i].style.left = ccontent[minIndex].offsetLeft + 'px';

            BoxHeightArr[minIndex] += ccontent[i].offsetHeight;//更新圖片欄高度
        }
    }
};

function getminheightLocation(BoxHeightArr, minHeight){
    for(var i in BoxHeightArr){
        if(BoxHeightArr[i] == minHeight){
            return i;
        }
    }
}

function getChildElement(parent,content){
    var contentArr = [];
    var allcontent = parent.getElementsByTagName("*");//獲得所有的標籤
    for(var i = 0; i < allcontent.length; i++)//遍歷allcontent這個數組裏的標籤以尋找到box標籤，一尋找到就將box標籤的對象加入到contentArr這個數組裏
    {
        if(allcontent[i].className == content)
        {
            contentArr.push(allcontent[i]);
        }
    }
    return contentArr;//返回含有所有box標籤的數組
}

一些特別技巧的應用：

1. 因爲BoxHeightArr是對象的數組，因此不能直接用Math.min，於是用了Math.min.apply()的方法，將this設爲null即可

2. 用JS設置一些表示距離的CSS元素時，記得最後加上單位如px

3. getElementsByTagName('*')星號可以獲得所有的標籤

4. style.cssText可以直接設置某元素的CSS內容