javascript瀑布流布局實現(xiàn)方法詳解

更新時間：2016年02月17日 12:18:02 作者：The-duke

這篇文章主要介紹了javascript瀑布流布局實現(xiàn)方法,結(jié)合實例形式較為詳細的分析了JavaScript實現(xiàn)瀑布流布局的樣式與具體功能代碼,需要的朋友可以參考下

本文實例講述了javascript瀑布流布局實現(xiàn)方法。分享給大家供大家參考，具體如下：

html結(jié)構(gòu)：

<div id="waterfall">
  <div class="mod-box">
    <div class="mod-img">...</div>
  </div>
  <div class="mod-box">
    <div class="mod-img">...</div>
  </div>
  <div class="mod-box">
    <div class="mod-img">...</div>
  </div>
</div>

css樣式表：

*{margin:0;padding: 0}
#waterfall{position: relative;}
.mod-box{
  padding: 15px 0 0 15px;
  float: left;
}
.mod-img{
  padding: 9px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 5px #ccc;
  position: relative;
}
.mod-img img{
  width: 310px;
  height: auto;
}

javascript代碼：

window.onload = function(){
   waterFall("waterfall","mod-box");
}
window.onscroll = scroll;
window.onresize = function() {
  if(re)clearTimeout(re);
  var re = setTimeout(function() {
  waterFall("waterfall","mod-box");
   }, 200);
}
var dataInit = {
  "data": [
    {
      "src": "5.jpg"
    },
    {
      "src": "6.jpg"
    }
   ]
  };
/**
 * 滾動添加數(shù)據(jù)函數(shù)
 */
function scroll(){
 var flag = checkScroll("waterfall","mod-box");
 if(flag ){
   var oparent = document.getElementById("waterfall");
   var htmlStr = "";
   var len = dataInit.data.length;
   for(var i=0;i<len;i++){
     htmlStr+=""; //需要插入的結(jié)構(gòu)
   }
   oparent.innerHTML+=htmlStr;
   waterFall("waterfall","mod-box"); //重新調(diào)用一次
 }
}
/**
 * 瀑布流函數(shù)
 * @param parentID 容器id
 * @param clsName 數(shù)據(jù)塊className
 */
function waterFall(parentID,clsName){
  var oParent = document.getElementById(parentID); // 父級對象
  //將content下所有class為mod-box的元素取出來
  var oBoxs = getObjsByClassName(oParent,clsName);// 獲取存儲塊框clsName的數(shù)組oBoxs
  var oBoxWidth = oBoxs[0].offsetWidth;  //obox的寬 ==>310+9*2+2+15 = 345(包含邊框和內(nèi)邊距) 一個塊框的寬
  var pageWidth = document.documentElement.clientWidth; //頁面可視寬度
  //var pageWidth = document.documentElement.offsetWidth; //頁面可視寬度
  var cols = Math.floor(pageWidth/oBoxWidth); //計算整個頁面顯示的列數(shù)（頁面寬/obox的寬）每行中能容納的mod-box個數(shù)
  var hAarr = []; //用于存儲 每列中的所有塊框相加的高度。
  var minH;   
  var minHIndex;    //最小高度對應的索引值
  for(var i = 0;i<oBoxs.length;i++){//遍歷數(shù)組aPin的每個塊框元素
    oBoxs[i].style.position="absolute";
    if(i<cols){ //把第一行排放好，并將每一列的高度記入數(shù)據(jù)hAarr
      hAarr.push(oBoxs[i].offsetHeight);
      oBoxs[i].style.top=0+"px";
      oBoxs[i].style.left=oBoxWidth*i+"px";
    }else{
      minH = Math.min.apply(null,hAarr); //數(shù)組hAarr中的最小值minH
      minHIndex = getMinhIndex(hAarr,minH);
      oBoxs[i].style.top=minH+"px";
      // oBoxs[i].style.left=oBoxWidth*minHIndex+"px";
      oBoxs[i].style.left= oBoxs[minHIndex].offsetLeft+"px";
      //數(shù)組 最小高元素的高 + 添加上的aPin[i]塊框高
      hAarr[minHIndex]+=oBoxs[i].offsetHeight; //更新添加了塊框后的列高
    }
  }
  var maxH = Math.max.apply(null,hAarr);
  oParent.style.cssText = "width:"+oBoxWidth*cols+"px;margin:0 auto;height:"+maxH+"px;"; //設(shè)置父級居中樣式：定寬+自動水平外邊距
}
/**
 * 檢查是否符合加載數(shù)據(jù)（滾動到最后一個oBox）
 * @param parentID 容器id
 * @param clsName 數(shù)據(jù)塊className
 * @returns {boolean}
 */
function checkScroll(parentID,clsName){
  var parentObj = typeof parentID=="object" ?parentID:document.getElementById(parentID);
  var oBoxs = getObjsByClassName(parentObj,clsName);
  var lastBoxH = oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
  //創(chuàng)建【觸發(fā)添加塊框函數(shù)waterfall()】的高度：最后一個塊框的距離網(wǎng)頁頂部+自身高的一半(實現(xiàn)未滾到底就開始加載)
  var scrolltop = document.body.scrollTop ||document.documentElement.scrollTop;
  //標準模式與混雜模式
  var height = document.documentElement.clientHeight; //頁面高度
  return (lastBoxH<scrolltop+height)?true:false;
}
/**
 * 根據(jù)class獲得元素
 * @param id
 * @param clsName
 * @returns {Array}
 */
function getObjsByClassName(parentID,clsName){
  var parentObj = typeof parentID=="object" ?parentID:document.getElementById(parentID);
  if(!parentObj){
    return;
  }
  var childObjs = parentObj.getElementsByTagName("*"); //獲取 父級的所有子集
  var calssObjs = []; //創(chuàng)建一個數(shù)組 用于收集子元素
  for(var i in childObjs){//遍歷子元素、判斷類別、壓入數(shù)組
    if(childObjs[i].className==clsName){ 
      calssObjs.push(childObjs[i]);
    }
  }
  return calssObjs;
}
/**
 * 獲取最小值的索引minIndex
 * @param arr
 * @param minH
 * @returns {string}
 */
function getMinhIndex(arr,minH){
  for(var i in arr){
    if(arr[i]===minH){
      return i;
    }
  }
}

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript擴展技巧總結(jié)》及《JavaScript運動效果與技巧匯總》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章: