Heim > Web-Frontend > js-Tutorial > Hauptteil

Detaillierte Erläuterung der JavaScript-Wasserfall-Flow-Layout-Implementierungsmethode_Javascript-Fähigkeiten

WBOY
Freigeben: 2016-05-16 15:15:04
Original
1036 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die Implementierungsmethode des JavaScript-Wasserfall-Flow-Layouts. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

HTML-Struktur:

<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>

Nach dem Login kopieren

CSS-Stylesheet:

*{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;
}

Nach dem Login kopieren

Javascript-Code:

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"
    }
   ]
  };
/**
 * 滚动添加数据函数
 */
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+=""; //需要插入的结构
   }
   oparent.innerHTML+=htmlStr;
   waterFall("waterfall","mod-box"); //重新调用一次
 }
}
/**
 * 瀑布流函数
 * @param parentID 容器id
 * @param clsName 数据块className
 */
function waterFall(parentID,clsName){
  var oParent = document.getElementById(parentID); // 父级对象
  //将content下所有class为mod-box的元素取出来
  var oBoxs = getObjsByClassName(oParent,clsName);// 获取存储块框clsName的数组oBoxs
  var oBoxWidth = oBoxs[0].offsetWidth;  //obox的宽 ==>310+9*2+2+15 = 345(包含边框和内边距) 一个块框的宽
  var pageWidth = document.documentElement.clientWidth; //页面可视宽度
  //var pageWidth = document.documentElement.offsetWidth; //页面可视宽度
  var cols = Math.floor(pageWidth/oBoxWidth); //计算整个页面显示的列数(页面宽/obox的宽)每行中能容纳的mod-box个数
  var hAarr = []; //用于存储 每列中的所有块框相加的高度。
  var minH;   
  var minHIndex;    //最小高度对应的索引值
  for(var i = 0;i<oBoxs.length;i++){//遍历数组aPin的每个块框元素
    oBoxs[i].style.position="absolute";
    if(i<cols){ //把第一行排放好,并将每一列的高度记入数据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); //数组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";
      //数组 最小高元素的高 + 添加上的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;"; //设置父级居中样式:定宽+自动水平外边距
}
/**
 * 检查是否符合加载数据(滚动到最后一个oBox)
 * @param parentID 容器id
 * @param clsName 数据块className
 * @returns {boolean}
 */
function checkScroll(parentID,clsName){
  var parentObj = typeof parentID=="object" &#63;parentID:document.getElementById(parentID);
  var oBoxs = getObjsByClassName(parentObj,clsName);
  var lastBoxH = oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
  //创建【触发添加块框函数waterfall()】的高度:最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)
  var scrolltop = document.body.scrollTop ||document.documentElement.scrollTop;
  //标准模式与混杂模式
  var height = document.documentElement.clientHeight; //页面高度
  return (lastBoxH<scrolltop+height)&#63;true:false;
}
/**
 * 根据class获得元素
 * @param id
 * @param clsName
 * @returns {Array}
 */
function getObjsByClassName(parentID,clsName){
  var parentObj = typeof parentID=="object" &#63;parentID:document.getElementById(parentID);
  if(!parentObj){
    return;
  }
  var childObjs = parentObj.getElementsByTagName("*"); //获取 父级的所有子集
  var calssObjs = []; //创建一个数组 用于收集子元素
  for(var i in childObjs){//遍历子元素、判断类别、压入数组
    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;
    }
  }
}

Nach dem Login kopieren

Leser, die an mehr JavaScript-bezogenen Inhalten interessiert sind, können sich die Spezialthemen auf dieser Website ansehen: „Zusammenfassung der JavaScript-Switching-Spezialeffekte und -Techniken“, „Zusammenfassung der JavaScript-Animations-Spezialeffekte und Techniken“, „ Zusammenfassung der JavaScript-Fehler und Debugging-Fähigkeiten“, „Zusammenfassung der JavaScript-Erweiterungsfähigkeiten“ und „Zusammenfassung der JavaScript-Bewegungseffekte und -Fähigkeiten"

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der JavaScript-Programmierung befassen.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage