解析瀑布流佈局:JS 絕對定位的實作_javascript技巧

絕對定位方式的瀑布流佈局：

一、版面

1、包圍區塊框的容器:

複製程式碼

複製程式碼

程式碼🎜>

    ... ...

2、一個方塊：

複製代碼

代碼如下:

   

       
   

3、初始化第一行/5個區塊框：

複製程式碼


程式碼如下:

.pin{
        padding: 15px 0 0 15px;        10px;
        border:1px solid #ccc; }    .box img{
        width:192px;        height:auto;}

二、思路：

1、設定父級main的樣式:水平居中。
2、設定每個塊框pin的樣式:絕對定位。

3、設定視窗滾動事件的監聽函數:讀取資料添加區塊框。

JS實作：

　　1-①：取得父級oParent：
　　1-②：建立函數getClassObj()-透過父級id和區塊框類別名稱-取得包含區塊框的陣列。

複製程式碼

程式碼如下:

   var oParent=document's; // 父級物件
    var aPin=getClassObj(oParent,pin);// 取得儲存區塊框pin的陣列aPin    var num=Math.floor(document.documentElement.cliclientWidth/ainnofid );//獲取-每行中能容納的塊框個數-num【窗口寬度除以一個塊框寬度】

　　oParent.style.cssText='width:' iPinW*num 'px;margin:0 auto;';//用cssText屬性為父級main新增居中樣式：定寬自動水平外邊距

複製程式碼

程式碼如下:

function getClassObj(>

function getClassObj(>

function getClassObj(>        var pinS=[];//建立一個陣列用於儲存類別為className的元素
   for i  =0;i           if (obj[i].className==className 🠎 ]);

        };
        return pinS;}


　〜〔245組數：建立數字組數：建立數字組數：個塊框aPin[i]，將前num個塊框賦值給數組pinHArr，對超出一行能容納的塊框數num的塊框絕對定位。

　　2-③：用創建函數getminHIndex()-返回一個數組中的最小值複製代碼

代碼如下:

var pinHArr=[];//用於儲存每列中的所有方塊框相加的高度【隨著列數的不同此數組的length也隨之改變】
    for(var i=0;i        var pinH=aPin[i].offsetHeight;///offsetHeight;///i pin的第一個區塊框的可見寬offsetHeight
        if(i            pinHArr[i]=pinH; 🎜> var minH=Math.min.apply(null,pinHArr);//計算數組pinHArr中的最小值minH
            var minHIndex=getminHIndex(pinHArr,min     var minHIndex=getminHIndex(pinHArr,minH);數組pinHArr中的索引minHIndex
            aPin[i].style.position='absolute';//設定絕對位移
            aPin[ i].style.left=aPin[minHIndex].offsetLeft 'px';//數組最小高元素的高添加上的aPin[i]塊框高
            pinHArr[min           pinHArr[min      //更新新增區塊框後的欄位高
        }
    }

代碼如下:

    function getminHIndex(arr,minH){
        for(var i in arr){
       for(var i in arr){
}
    }

 　　3：設定視窗滾動事件的監聽函數:讀取資料新增區塊方塊。

複製程式碼 程式碼如下:

var dataInt={'data':[{'src':[{'src':[{'src':[{'src':[{'src':[{'src':[{'src':[{'src':[) ':'g (1).jpg'},{'src':'g (9).jpg'},{'src':'g (2).jpg'},{'src':'g ( 4).jpg'}]};//一個暫時的資料物件
    //下方定義視窗捲動事件監聽函數
    window.onscroll=function(){
    window.onscroll=function(){
  🎜>        var oParent=document.getElementById('main');// 父級物件
        for(var i=0            oPin.className='pin';            .appendChild(oPin);              //建立子節點box
var oBox=document.createElement('div');
            oBox.className='box';
        var oImg=document.createElement('img');//建立新增子節點img
            oImg.src='./images/' dataInt.data[i].src;
    );
        waterfall('main', 'pin');//將①②封裝成函數waterfall()，並將新增的節點加入新增與定位至文件。
        };
    }

複製程式碼

function checkscrollside(){
        var oParent=document.getElementById('main');
   o, Par  var lastPinH=aPin[aPin .length-1].offsetTop Math.floor(aPin[aPin.length-1].offsetHeight/2);//創建【觸發添加塊框函數waterfall()】的高度：最後一個塊框的距離網頁頂部自身高的一半(實現未滾到底就開始載入)
        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//注意解決相容性/視窗高度
        return (lastPinH    }

>三、最終效果：

四、總結：此為讓自己梳理一下思路，表達不太仔細連貫，僅供參考。

五、完成後的html檔案與js檔案：

html：index.html複製程式碼 程式碼如下:

 
 
 
 
  script>

 
 < ;style type="text/css">
     *{padding: 0;margin:0;}
    *{padding: 0;margin:0;}
    *{padding: 0;margin:0;}
🎜>         位置：相對;
     }
     .pin{
         .pin{
     float:left;
     }
     .box{
         內邊距：10px;
         邊框：1px 實心#ccc;
             }
     .box img{
         寬度: 162px;
         高度:auto;
     }
  ;
 
mainodivodivo> class="pin">
        

            
        

            ;
    

    

        

    

    

        

    

    
        

    
 

js：waterfall.js 1 window.onload=function() {




複製代碼


程式碼如下：

waterfall('main','pin');
     var dataInt={'data':[{'src':'g (1).jpg'},{'src':' g (9).jpg'},{'src':'g (2).jpg'},{'src':'g (4).jpg'}]};

     window.onscroll =function(){
         if(checkscrollside()){
         var oParent=doc .data .length;i ){
             var oPin=document.createElement('div'); //新增元素節點
            //新增類別名稱name屬性
             oParent.appendChild (oPin);              //新增子節點
             ;
             oPin.appendChild(oBox);
             var oImg =document.createElement('img');
             oImg.src='./images/'dataInt.data[i].src;         waterfall ('main','pin');
         };
     }

 }
 /   pin 元素id
 */
 function waterfall(parent,pin){
     var oParent=document.getElementById(parent);// 父級物件
     var aPin=getClassObj(o/Parent), 取得區塊的儲存數組」的數字區塊/ aPin
     var iPinW=aPin[0].offsetWidth;// 一個塊框pin的寬
     var num=Math.floor(document.documentElement.clientWidth//clientWidth/iPinW);個數【視窗寬度除以一個區塊框寬度】
     oParent.style.cssText='width:' iPinW*num 'px;ma rgin:0 auto;';//設定父級居中樣式：定寬自動水平外邊距

     var pinHArr=[];//用於儲存每列中的所有方塊相加的高度。
for(var i=0;i var pinH=aPin[i].offsetHeight;
if(iを通じて 使用する 使用する 使用する 使用する 使用する 使用する 使用する 使用する 使用する 使用する 使用する 使用する 使用する 使用する 使用する 使用する 使用する 使用する 使用する 使用する 使用する 使用する 使用する 使用する 使用する 使用する 使用する 使用する 使用する 使用する 使用する 使用する 使用するはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいso so so so so so so so so so so so so so so so so so so so pinHArr);//配列 pinHArr の最小値 minH
var minHIndex=getminHIndex(pinHArr,minH);
aPin[i].style.position='absolute';//絶対変位を設定します
[i].style.top=minH 'px';
aPin[i].style.left=aPin [minHIndex].offsetLeft 'px'; [i] ブロック ボックスの高さ
pinHArr[minHIndex] = aPin[i].offsetHeight;//ブロック ボックスを追加した後に列の高さを更新します**
*親要素と子要素のクラスを通じて同じ型の子要素の配列を取得します
*/
。 function getClassObj(parent,className){
var obj=parent.getElementsByTagName('*');//親のすべてのサブセットを取得します
var pinS=[];/ / サブ要素を収集する配列を作成します
className == className）{
🎝>*/
function getMinhindex（arr、minh）{
for（var i in arr）{
if（arr [i] == minH){
return i;
}
}
}


function checkscrollside(){
var oParent=document.getElementById('main');
var aPin=getClassObj(oParent,'pin');
var lastPinH=aPin[aPin.length-1].offsetTop Math.floor(aPin[aPin.length-1].offsetHeight/2);/ /Create the height of [追加ブロックボックス関数ウォーターフォール()をトリガー]: 最後のブロック ボックスと Web ページの上部の間の距離は、その高さの半分です (下部までスクロールする前に読み込みを開始するため)
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//互換性の解決に注意してください
var documentH=document .documentElement.clientHeight;//ページの高さ
return (lastPinH }