bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

使用JavaScript怎么編寫一個(gè)瀑布流圖片加載效果

使用JavaScript怎么編寫一個(gè)瀑布流圖片加載效果？相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

站在用戶的角度思考問題，與客戶深入溝通，找到陽(yáng)春網(wǎng)站設(shè)計(jì)與陽(yáng)春網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名注冊(cè)、網(wǎng)頁(yè)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋陽(yáng)春地區(qū)。

原理是：

1.設(shè)定一行中的列數(shù)；

2.取第一行中每一個(gè)div的高度并把每一個(gè)高度放進(jìn)一個(gè)數(shù)組中；

3.算出數(shù)組中最小高度的index值；

4.把第二行的第一個(gè)div放到最小高度的div的下方并把重新算出的高度值放進(jìn)數(shù)組中，重新計(jì)算最小高度的index值；

5.以此類推實(shí)現(xiàn)多欄布局的瀑布流效果；

6.如果最后一張div的高度已滾動(dòng)出現(xiàn)在底部時(shí)創(chuàng)建新的div添加到最后一張的后面，不斷循環(huán)以達(dá)到加載效果；接下來代碼實(shí)現(xiàn)。

<div id="main">
    <div class="box">
      <div class="Pic">
        <img src="images/0.jpg" alt="" />
      </div>
    </div>
    <div class="box">
      <div class="Pic">
        <img src="images/1.jpg" alt="" />
      </div>
    </div>
    <div class="box">
      <div class="Pic">
        <img src="images/2.jpg" alt="" />
      </div>
    </div>
    <div class="box">
      <div class="Pic">
        <img src="images/3.jpg" alt="" />
      </div>
    </div>
    <div class="box">
      <div class="Pic">
        <img src="images/4.jpg" alt="" />
      </div>
    </div>
    <div class="box">
      <div class="Pic">
        <img src="images/5.jpg" alt="" />
      </div>
    </div>
    <div class="box">
      <div class="Pic">
        <img src="images/6.jpg" alt="" />
      </div>
    </div>
    <div class="box">
      <div class="Pic">
        <img src="images/7.jpg" alt="" />
      </div>
    </div>
    <div class="box">
      <div class="Pic">
        <img src="images/8.jpg" alt="" />
      </div>
    </div>
    <div class="box">
      <div class="Pic">
        <img src="images/9.jpg" alt="" />
      </div>
    </div>
    <div class="box">
      <div class="Pic">
        <img src="images/10.jpg" alt="" />
      </div>
    </div>
    <div class="box">
      <div class="Pic">
        <img src="images/11.jpg" alt="" />
      </div>
    </div>
    <div class="box">
      <div class="Pic">
        <img src="images/12.jpg" alt="" />
      </div>
    </div>
    <div class="box">
      <div class="Pic">
        <img src="images/13.jpg" alt="" />
      </div>
    </div>
    <div class="box">
      <div class="Pic">
        <img src="images/14.jpg" alt="" />
      </div>
    </div>
    <div class="box">
      <div class="Pic">
        <img src="images/15.jpg" alt="" />
      </div>
    </div>
    <div class="box">
      <div class="Pic">
        <img src="images/16.jpg" alt="" />
      </div>
    </div>
    <div class="box">
      <div class="Pic">
        <img src="images/17.jpg" alt="" />
      </div>
    </div>
    <div class="box">
      <div class="Pic">
        <img src="images/18.jpg" alt="" />
      </div>
    </div>
    <div class="box">
      <div class="Pic">
        <img src="images/19.jpg" alt="" />
      </div>
    </div>
    <div class="box">
      <div class="Pic">
        <img src="images/20.jpg" alt="" />
      </div>
    </div>
    <div class="box">
      <div class="Pic">
        <img src="images/21(1).jpg" alt="" />
      </div>
    </div>
    <div class="box">
      <div class="Pic">
        <img src="images/22.jpg" alt="" />
      </div>
    </div>
  </div>
 *{padding: 0;margin: 0;}
#main{
  width: 1000px;
  margin: 0 auto;
  position: relative;
}
.box{
  display: inline-block;
  float: left;
  padding: 10px 0 0 10px;
}
.Pic{
  border: 1px #ccc solid;
  padding: 10px;
  border-radius: 8px;
}
.Pic img{
  width: 162px;
}

js代碼：

<script>
  window.onload=function(){
    waterFall('main','box');
    var dataInt={
      "data":[{"src":"0.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"}]
    };
     
    /*滾動(dòng)條滾動(dòng)時(shí)觸發(fā)的事件*/
    window.onscroll=function(){
      if(checkIsSlide()){ //結(jié)果返回是true則執(zhí)行
        var omain=document.getElementById('main');
        /*添加div到頁(yè)面上*/
        for(var l=0;l<dataInt.data.length;l++){ 
          var box=document.createElement('div');
          box.className="box";
          omain.appendChild(box);
          var pic=document.createElement('div');
          pic.className='Pic';
          box.appendChild(pic);
          var oimg=document.createElement('img');
          oimg.src="images/"+dataInt.data[l].src;
          pic.appendChild(oimg);
        }
        waterFall('main','box'); //新添加的div都要重新執(zhí)行waterFall方法，以實(shí)現(xiàn)瀑布流效果
      }
    }
  }
  /*實(shí)現(xiàn)瀑布流效果，多欄布局*/
  function waterFall(parent,pid){  //傳兩個(gè)參數(shù)，父元素parent和子元素pid
    var oparent=document.getElementById(parent);  //獲取父元素
    var opid=getClass(oparent,pid);  //獲取父元素下的classname為pid的所有子元素
    var cols=Math.floor(oparent.offsetWidth/opid[0].offsetWidth); //父元素寬度/一個(gè)子元素的寬度，即一行的列數(shù)
    var arrH=[];  //存放每一列的高度的數(shù)組
    for(var j=0;j<opid.length;j++){
      if(j<cols){ 
        arrH.push(opid[j].offsetHeight);//把第一行的高度都放進(jìn)數(shù)組中
      }else{  //第二行開始
        var minH=Math.min.apply(null,arrH);  //計(jì)算arrH的最小值
        var Index=getHIndex(arrH,minH); //使用getHIndex方法獲取最小值的index值
        /*把之后的div放到最小值div的下方*/
        opid[j].style.position='absolute'; 
        opid[j].style.top=minH+'px';
        opid[j].style.left=opid[0].offsetWidth*Index+'px';
        arrH[Index]+=opid[j].offsetHeight; //數(shù)組中的最小值加上已放在下方的div的高度值并重新循環(huán)
      }
    }
     
  }
 
  /*獲取父元素下的classname為cls的所有元素*/
  function getClass(parent,cls){
    var obj=parent.getElementsByTagName('*');
    var Clsarr=[];
    for(var i=0;i<obj.length;i++){
      if(obj[i].className==cls){
        Clsarr.push(obj[i]);
      }
    }
    return Clsarr;
  }
  /*獲取arr數(shù)組中的最小值minH的Index值*/
  function getHIndex(arr,minH){
    for(var k=0;k<arr.length;k++){
      if(arr[k]==minH){
        return k;
      }
    }
  }
  /*判斷當(dāng)前滾動(dòng)的高度時(shí)候大于最后的div出現(xiàn)在底部的高度值,即是否要加載*/
  function checkIsSlide(){
    var omain=document.getElementById('main');
    var obox=getClass(omain,'box');
    var lastTop=obox[obox.length-1].offsetTop+Math.floor(obox[obox.length-1].offsetHeight/2);
    var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
    var documentH=document.documentElement.clientHeight;
    return (lastTop)<(scrollTop+documentH)?true:false;
  }
</script>

看完上述內(nèi)容，你們掌握使用JavaScript怎么編寫一個(gè)瀑布流圖片加載效果的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)站題目：使用JavaScript怎么編寫一個(gè)瀑布流圖片加載效果
標(biāo)題來源：http://vcdvsql.cn/article22/jhiojc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、用戶體驗(yàn)、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站營(yíng)銷、定制開發(fā)、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)