瀑布流佈局的實現

提出問題

如何實現圖片的瀑布流佈局？

實現思路

兩種方法，一種是 CSS 實現，能實現頁面響應式瀑布流，使用 column-width 和 column-gap 屬性。另一種是 JS 實現，通過獲取窗口寬度計算首行填充圖片個數，定義行高度數組。然後將 DOM 操作修改第二行第一個元素的絕對定位，使其位於上一行高度最小的元素之下，並求和這兩個元素的高度，更新高度數組。

解決問題

詳細代碼請點擊這裏,喜歡就點個 star 唄。

CSS 實現代碼：

在最外層容器 div 加入如下屬性：

.container{
        /*列寬*/
        -webkit-column-width:202px;
        -moz-column-width:202px; 
        -webkit-column-gap:5px;
        -moz-column-gap:5px;
    }

演示 Demo 請點擊這裏。

JS 實現代碼：

window.onload=function(){

    waterfall('main','pin');

}
/*
    parend 父級id
    pin 元素id
*/
function waterfall(parent,pin){
    var oParent=document.getElementById(parent);// 父級對象
    var aPin=getClassObj(oParent,pin);// 獲取存儲塊框pin的數組aPin
    var iPinW=aPin[0].offsetWidth;// 一個塊框pin的寬
    console.log('aPin', aPin)
    var num=Math.floor(document.documentElement.clientWidth/iPinW);//每行中能容納的pin個數【窗口寬度除以一個塊框寬度】
    oParent.style.cssText='width:'+iPinW*num+'px;margin:0 auto;';//設置父級居中樣式：定寬+自動水平外邊距

    var pinHArr=[];//用於存儲 每列中的所有塊框相加的高度。
    for(var i=0;i<aPin.length;i++){//遍歷數組aPin的每個塊框元素
        var pinH=aPin[i].offsetHeight;
        if(i<num){
            pinHArr[i]=pinH; //第一行中的num個塊框pin 先添加進數組pinHArr
        }else{
            var minH=Math.min.apply(null,pinHArr);//數組pinHArr中的最小值minH
            var minHIndex=getminHIndex(pinHArr,minH);
            aPin[i].style.position='absolute';//設置絕對位移
            aPin[i].style.top=minH+'px';
            aPin[i].style.left=aPin[minHIndex].offsetLeft+'px';
            //數組 最小高元素的高 + 添加上的aPin[i]塊框高
            pinHArr[minHIndex]+=aPin[i].offsetHeight;//更新添加了塊框後的列高
        }
    }
}

/****
    *通過父級和子元素的class類 獲取該同類子元素的數組
    */
function getClassObj(parent,className){
    var obj=parent.getElementsByTagName('*');//獲取 父級的所有子集
    var pinS=[];//創建一個數組 用於收集子元素
    for (var i=0;i<obj.length;i++) {//遍歷子元素、判斷類別、壓入數組
        if (obj[i].className==className){
            pinS.push(obj[i]);
        }
    };
    return pinS;
}
/****
    *獲取 pin高度 最小值的索引index
    */
function getminHIndex(arr,minH){
    for(var i in arr){
        if(arr[i]==minH){
            return i;
        }
    }
}

演示 Demo 請點擊這裏。

JQ 實現代碼：

$( window ).on( "load", function(){
    waterfall('main','pin');
});

/*
    parend 父級id
    pin 元素id
*/
function waterfall(parent,pin){
    var $aPin = $( "#main>div" );
    var iPinW = $aPin.eq( 0 ).width();// 一個塊框pin的寬
    var num = Math.floor( $( window ).width() / iPinW );//每行中能容納的pin個數【窗口寬度除以一個塊框寬度】
    //oParent.style.cssText='width:'+iPinW*num+'px;ma rgin:0 auto;';//設置父級居中樣式：定寬+自動水平外邊距
    $( "#main" ).css({
        'width:' : iPinW * num,
        'margin': '0 auto'
    });

    var pinHArr=[];//用於存儲 每列中的所有塊框相加的高度。

    $aPin.each( function( index, value ){
        var pinH = $aPin.eq( index ).height();
        if( index < num ){
            pinHArr[ index ] = pinH; //第一行中的num個塊框pin 先添加進數組pinHArr
        }else{
            var minH = Math.min.apply( null, pinHArr );//數組pinHArr中的最小值minH
            var minHIndex = $.inArray( minH, pinHArr );
            $( value ).css({
                'position': 'absolute',
                'top': minH + 15,
                'left': $aPin.eq( minHIndex ).position().left
            });
            //數組 最小高元素的高 + 添加上的aPin[i]塊框高
            pinHArr[ minHIndex ] += $aPin.eq( index ).height() + 15;//更新添加了塊框後的列高
        }
    });
}

演示 Demo 請點擊這裏。