快捷導航

JS實現(xiàn)圖片瀑布流效果

更新時間：2021年09月17日 12:01:29 作者：fanfan_h

這篇文章主要為大家詳細介紹了JS實現(xiàn)圖片瀑布流，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JS實現(xiàn)圖片瀑布流的具體代碼，供大家參考，具體內(nèi)容如下

過程：

1、創(chuàng)建一個放所有圖片的模塊bigblock。
2、獲取這個大模塊，追加一個子元素塊來放小圖。
3、封裝一個函數(shù)list(n)來存放50張圖片，并且將每張圖追加放入空數(shù)組ele[]中。
4、封裝一個函數(shù)set_position（），來確定每個圖片的位置，用到了offsetHeight，offsetTop，offsetWidth等屬性，同時給最大塊也設(shè)置動態(tài)的高度，隨著加載的圖片數(shù)量增多，最大塊的高度也隨著增高。
5、使用 window.onload事件，加載圖片更方便。
6、給瀏覽器的滾動條添加事件，讓滾動條滑到body的可視區(qū)域最底部以上10px 時，加載出新的30張圖片，并且每次滾動條停留在到剛加載的圖片位置。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>photo瀑布流</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
           /* background: #ebebeb;*/
            background: url(./img/bging2.jpg );
            background-size:100% ;
            height:100%;
        }
        .bigblock {
            position: relative;
            width:650px;
            min-height: 200px;
            background: #fff;
            margin:auto;

        }
        .smallblock{
            position:absolute;
            width:100px;
            border-radius:5px ;
            box-shadow: 0 0 7px #89c8eb;
            box-sizing: border-box;
            overflow: hidden;
        }
        .photo{
            width:100%;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div class="bigblock">

</div>
<script>
    var Big=document.getElementsByClassName ("bigblock")[0];
    var ele=[];
    var num=6;
    var bghight=0;
    var start=0;
    var image_img=["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "9.jpg", "10.jpg","11.jpg","12.jpg","13.jpg","14.jpg","15.jpg","16.jpg","17.jpg"];
    for(var i=0;i<50;i++){
        list();

    }
  function  list(n){
      var small=document.createElement("div");
      var image=document.createElement("img");
      small.className="smallblock";
      image.className="photo";
      image.src="./img/"+image_img[parseInt(Math.random()* image_img.length)]; //0-12
      ele.push(small);
      Big.appendChild(small);
      small.appendChild (image);

  }
   function set_position(){
     for(var i=start;i<ele.length;i++){
       //設(shè)置每張圖片的位置
       var settop=i <num ? 0: ele[i-num].offsetHeight +10 + ele[i-num].offsetTop ;
       ele[i].style.top=settop+"px";
       var setleft = i %num * ele[i].offsetWidth + (i % num) * 10;
       ele[i].style.left=setleft+"px";
         //獲取背景的高度
       bghight =(ele[i].offsetHeight +ele[i].offsetTop)>bghight ? ele[i].offsetHeight +ele[i].offsetTop :bghight ;
       Big.style.height =bghight +"px";
     }
   }

   window.onload=function(){
       set_position();
       //添加瀏覽器的滾動條事件
       this.addEventListener ("scroll",function(){
          var b_height=document.body.clientHeight;
           if(parseInt (this.pageYOffset+ this.innerHeight ) > b_height-10 ){
              start =ele.length;
              for(i=0;i<30;i++){
                   list();
              }
               set_position ();
           }
          // console.log(b_height);  //body的可視高度，可變
          // console.log(this.pageYOffset);    //滾動條的上偏移量
          // console.log(this.innerHeight);   //瀏覽器可視區(qū)域的高
       })
   }
</script>
</body>
</html>