js瀑布流 - 簡書

 **瀑布流概念**：
        又稱瀑布流式布局蕊肥，是比較流行的一種網(wǎng)站頁面布局方式庶柿。
        視覺表現(xiàn)為參差不齊的多欄布局拍摇，最早采用此布局的是網(wǎng)站是Pinterest述吸，后逐漸在國內(nèi)流行喷橙。 

 **瀑布流原理**：
           頁面容器內(nèi)的多個高度不固定的div之間按照一定的間隔參差不齊的無序浮動癞志，
        鼠標(biāo)滾動時不斷在容器內(nèi)的尾部加載數(shù)據(jù)往枷，且自動加載到空缺位置，不斷循環(huán)今阳。

   **  優(yōu)點(diǎn)：**

            1.有效降低了界面復(fù)雜度师溅，節(jié)省了空間：
     不再需要臃腫復(fù)雜的頁面導(dǎo)航鏈接或者按鈕了； 

            2.在觸屏設(shè)備上交互方式有更好的用戶體驗盾舌，
          通過向上滑動進(jìn)行頁面滾動和數(shù)據(jù)加載墓臭，對操作的精準(zhǔn)程度要求遠(yuǎn)遠(yuǎn)低于點(diǎn)擊按鈕或者鏈接；

            3.更高的參與度妖谴，使用戶能更好的專注于瀏覽而不是操作窿锉；

    ** 缺點(diǎn)：**

            1.無限滾動只適用與特定類型產(chǎn)品中的某一類型，如某類微博信息膝舅，購物網(wǎng)站的某類商品嗡载，而不適用與一般的門戶網(wǎng)站，使用需斟酌仍稀；

            2.需要打造額外的js庫來保證頁面數(shù)據(jù)的加載和排列洼滚，而這在一定意義上增加了在網(wǎng)頁的性能和設(shè)備兼容等方面的問題；

   **  js核心思路：**

            1.編寫方法：獲取容器內(nèi)所有外層元素技潘，存入數(shù)組遥巴；

            2.編寫方法：計算容器內(nèi)一行可以承載多少個元素千康，方法：容器寬度/元素寬度，四舍五入向下取整铲掐；

            3.編寫方法：把每一行中所有元素的高度值存入數(shù)組拾弃；

            4.編寫方法：在高度值數(shù)組中找到最小高度值；

            5.編寫方法：把第二行第一個元素定位到上一行所有元素中高度最低的元素下面摆霉，即設(shè)置該元素的top豪椿，left，position屬性携栋；

            6.編寫方法：重置當(dāng)前高度值數(shù)組中的最小值搭盾；

            7.編寫方法：從第二行第一個元素開始，遍歷每個元素刻两，用上述方法重新定位每個元素的位置增蹭，把該事件綁定到頁面；

            8.編寫方法：監(jiān)聽鼠標(biāo)事件磅摹，當(dāng)前容器內(nèi)最下面一個元素的offsetTop<瀏覽器可視高度+已滾動高度時，加載下一頁數(shù)據(jù)霎奢；

            9.加載完之后户誓，用上述方法重新定位新加載元素的位置；



代碼效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
 margin: 0px;
 padding: 0px;
}
#container{
 position: relative;
}
.box{
 padding: 7px;
 float: left;
 margin: 0px auto;
}
.box_img{
 padding: 5px;
 border: 1px solid #DCDCDC;
 box-shadow: 0 0 5px #ccc;
 border-radius: 5px;
}
.box_img img{
 width: 230px;
}
    </style>
</head>
<body>
    <div id="container">
        <div class="box">
         <div class="box_img">
          <img src="img/1.jpg" />
         </div>
        </div>
        <div class="box">
         <div class="box_img">
          <img src="img/2.jpg" />
         </div>
        </div>
        <div class="box">
         <div class="box_img">
          <img src="img/3.jpg" />
         </div>
        </div>
        <div class="box">
         <div class="box_img">
          <img src="img/4.jpg" />
         </div>
        </div>
        <div class="box">
         <div class="box_img">
          <img src="img/5.jpg" />
         </div>
        </div>
        <div class="box">
         <div class="box_img">
          <img src="img/6.jpg" />
         </div>
        </div>
        <div class="box">
         <div class="box_img">
          <img src="img/7.jpg" />
         </div>
        </div>
        <div class="box">
         <div class="box_img">
          <img src="img/3.jpg" />
         </div>
        </div>
        <div class="box">
         <div class="box_img">
          <img src="img/1.jpg" />
         </div>
        </div>
        <div class="box">
         <div class="box_img">
          <img src="img/2.jpg" />
         </div>
        </div>
        <div class="box">
         <div class="box_img">
          <img src="img/1.jpg" />
         </div>
        </div>
        <div class="box">
         <div class="box_img">
          <img src="img/2.jpg" />
         </div>
        </div>
        <div class="box">
         <div class="box_img">
          <img src="img/3.jpg" />
         </div>
        </div>
        <div class="box">
         <div class="box_img">
          <img src="img/4.jpg" />
         </div>
        </div>
        <div class="box">
         <div class="box_img">
          <img src="img/5.jpg" />
         </div>
        </div>
        <div class="box">
         <div class="box_img">
          <img src="img/6.jpg" />
         </div>
        </div>
          
       </div>
</body>
</html>
<script>

    window.onload=function(){
   
   imgLocation("container","box");
   var imgData={"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"}]}
   window.onscroll=function(){
  //  console.log(document.documentElement.scrollTop);
    if(checkFlag()){
     var cparent=document.getElementById("container");
     for(var i=0;i<imgData.data.length;i++){
      var ccontent=document.createElement("div");
      ccontent.className="box";
      cparent.appendChild(ccontent);
      var boximg=document.createElement("div");
      boximg.className="box_img";
      ccontent.appendChild(boximg);
      var img=document.createElement("img");
      img.src="img/"+imgData.data[i].src;
      boximg.appendChild(img);
        
      //另外一種方法在div后邊追加內(nèi)容幕侠，不覆蓋原有內(nèi)容
  //    var content="<div class='box'><div class='box_img'><img src='img/"+imgData.data[i].src+"'/></div></div>";
  //    cparent.innerHTML+=content;
     }
     imgLocation("container","box");
    }
   }
  }
    
  function checkFlag(){
   var cparent=document.getElementById("container");
   var ccontent=getChildElement(cparent,"box");//圖片的所有box數(shù)
   var lastContentHeight=ccontent[ccontent.length-1].offsetTop;//最后一張圖片距離頂部高度
   var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//滾動條距離頂部高度
   var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;//屏幕高度
  // console.log(lastContentHeight+","+scrollTop+","+pageHeight);
   if(lastContentHeight<scrollTop+pageHeight){
    return true;
   }
  }
    
  function imgLocation(parent,content){
   var cparent=document.getElementById(parent);
   var ccontent=getChildElement(cparent,content);//圖片的所有box數(shù)
   var imgWidth=ccontent[0].offsetWidth;//圖片寬度
   var num=Math.floor(document.documentElement.clientWidth/imgWidth);//一行放圖片個數(shù)
   cparent.style.cssText="width:"+imgWidth*num+"px;margin:0px auto";//container的寬度
   var boxHeightArr=[];//每一列box高度
   for(var i=0;i<ccontent.length;i++){
    if(i<num){
     boxHeightArr[i]=ccontent[i].offsetHeight;
    }else{
     var minHeight=Math.min.apply(null,boxHeightArr);//最小高度
     var minIndex = getMinheightLocation(boxHeightArr,minHeight);//得到最小高度下標(biāo)
  //   console.log(minHeight+","+minIndex);
     ccontent[i].style.position="absolute";
     ccontent[i].style.top=minHeight+"px";//距離頂部高度
     ccontent[i].style.left=ccontent[minIndex].offsetLeft+"px";//距離左邊長度
     boxHeightArr[minIndex]+=ccontent[i].offsetHeight;
  //   console.log(ccontent[i].offsetHeight+","+ccontent[i].height);//ccontent[i].height=undefined
       
    }
   }
  }
    
  function getMinheightLocation(boxHeightArr,minHeight){
   for(var i in boxHeightArr){
    if(boxHeightArr[i]==minHeight){
     return i
    }
   }
  }
    
  function getChildElement(parent,content){
   //將parent下有content的全部取出
   var contentArr=[];
   var allContent=parent.getElementsByTagName("*");
   for(i=0;i<allContent.length;i++){
    if(allContent[i].className=="box"){
     contentArr.push(allContent[i]);
    }
   }
   return contentArr;
  }
       </script>

兼容性
1 點(diǎn)擊300ms 使用fastclick
2 移動端1px 在ios中使用0.5px
3 js中獲取瀏覽器高度帝美，獲取scrollTOP等屬性需要兼容
4 H5 的audio在ios上autoplay不會自動播放一般使用進(jìn)入頁面后，使用js控制播放
5 在html上加overflow：hidden屬性的時候晤硕，好多移動端瀏覽器都不支持
要實(shí)現(xiàn)超出范圍隱藏悼潭，滾動條不顯示，一般使用js獲取高度來動態(tài)設(shè)置html高度
6 ios系統(tǒng)中在移動瀏覽器的頁面中給按鈕加JS事件舞箍，其按鈕必須是原生HTML按鈕或者由<a>標(biāo)簽自定義構(gòu)成舰褪。
原來在IOS系統(tǒng)中，瀏覽器只支持給原生HTML按鈕或<a>標(biāo)簽加JS事件
7 你用js 生成的一個按鈕 <div class="btn">按鈕</div>
在ios上直接$("#btn").click是不能加點(diǎn)擊事件的疏橄，必須使用事件委托
8 h5頁面當(dāng)輸入框在最底部占拍，點(diǎn)擊軟鍵盤后輸入框會被遮擋。定時器或者修改為固定定位

                  setTimeout(function(){
                     document.body.scrollTop = document.body.scrollHeight;
                  },300);
               var oHeight = $(document).height(); //瀏覽器當(dāng)前的高度
               $(window).resize(function(){ 
            if($(document).height() < oHeight){ 
            }else{ 
        $("#footer").css("position","absolute");
  }