JS 코드를 공유하여 폭포 흐름 로딩 이미지 효과 구현

오늘은 폭포 흐름 로딩 효과에 대해 배웠습니다. 많은 웹사이트에서 JS를 사용한 간단한 폭포 흐름 로딩 이미지 효과를 이 글을 통해 공유하겠습니다

오늘은 폭포 흐름 로딩 효과에 대해 배웠습니다. 많은 웹사이트에는 폭포 흐름 효과가 있습니다. 폭포 흐름은 웹 페이지에 동일한 너비와 다른 높이로 표시되는 많은 제품입니다. 스크롤 막대가 아래로 스크롤되면 이 레이아웃 데이터 블록도 지속적으로 로드되어 현재 꼬리에 추가됩니다.

원칙은 다음과 같습니다.

1. 행의 열 수를 설정합니다.

2. 행 및 병합 각 높이를 배열에 넣습니다.

3. 두 번째 행의 첫 번째 p를 배열의 p에 넣습니다. 아래의 최소 높이를 입력하고 다시 계산된 높이 값을 배열에 넣어 최소 높이의 인덱스 값을 다시 계산합니다.

5. 다중 열 레이아웃의 폭포 흐름 효과를 달성합니다. 🎜>6. 마지막 p의 높이가 스크롤되어 맨 아래에 나타나면 새 p가 생성되어 마지막 p의 뒤에 추가되고 루프는 다음 코드를 계속해서 로드합니다. 구현됩니다.

<p id="main">
    <p class="box">
      <p class="Pic">
        <img src="images/0.jpg" alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="images/1.jpg" alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="images/2.jpg" alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="images/3.jpg" alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="images/4.jpg" alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="images/5.jpg" alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="images/6.jpg" alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="images/7.jpg" alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="images/8.jpg" alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="images/9.jpg" alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="images/10.jpg" alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="images/11.jpg" alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="images/12.jpg" alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="images/13.jpg" alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="images/14.jpg" alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="images/15.jpg" alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="images/16.jpg" alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="images/17.jpg" alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="images/18.jpg" alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="images/19.jpg" alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="images/20.jpg" alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="images/21.jpg" alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="images/22.jpg" alt="" />
      </p>
    </p>
  </p>

 *{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(&#39;main&#39;,&#39;box&#39;);
    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"}]
    };
    /*滚动条滚动时触发的事件*/
    window.onscroll=function(){
      if(checkIsSlide()){ //结果返回是true则执行
        var omain=document.getElementById(&#39;main&#39;);
        /*添加p到页面上*/
        for(var l=0;l<dataInt.data.length;l++){ 
          var box=document.createElement(&#39;p&#39;);
          box.className="box";
          omain.appendChild(box);
          var pic=document.createElement(&#39;p&#39;);
          pic.className=&#39;Pic&#39;;
          box.appendChild(pic);
          var oimg=document.createElement(&#39;img&#39;);
          oimg.src="images/"+dataInt.data[l].src;
          pic.appendChild(oimg);
        }
        waterFall(&#39;main&#39;,&#39;box&#39;); //新添加的p都要重新执行waterFall方法，以实现瀑布流效果
      }
    }
  }
  /*实现瀑布流效果，多栏布局*/
  function waterFall(parent,pid){  //传两个参数，父元素parent和子元素pid
    var oparent=document.getElementById(parent);  //获取父元素
    var opid=getClass(oparent,pid);  //获取父元素下的classname为pid的所有子元素
    var cols=Math.floor(oparent.offsetWidth/opid[0].offsetWidth); //父元素宽度/一个子元素的宽度，即一行的列数
    var arrH=[];  //存放每一列的高度的数组
    for(var j=0;j<opid.length;j++){
      if(j<cols){ 
        arrH.push(opid[j].offsetHeight);//把第一行的高度都放进数组中
      }else{  //第二行开始
        var minH=Math.min.apply(null,arrH);  //计算arrH的最小值
        var Index=getHIndex(arrH,minH); //使用getHIndex方法获取最小值的index值
        /*把之后的p放到最小值p的下方*/
        opid[j].style.position=&#39;absolute&#39;; 
        opid[j].style.top=minH+&#39;px&#39;;
        opid[j].style.left=opid[0].offsetWidth*Index+&#39;px&#39;;
        arrH[Index]+=opid[j].offsetHeight; //数组中的最小值加上已放在下方的p的高度值并重新循环
      }
    }
     
  }
  /*获取父元素下的classname为cls的所有元素*/
  function getClass(parent,cls){
    var obj=parent.getElementsByTagName(&#39;*&#39;);
    var Clsarr=[];
    for(var i=0;i<obj.length;i++){
      if(obj[i].className==cls){
        Clsarr.push(obj[i]);
      }
    }
    return Clsarr;
  }
  /*获取arr数组中的最小值minH的Index值*/
  function getHIndex(arr,minH){
    for(var k=0;k<arr.length;k++){
      if(arr[k]==minH){
        return k;
      }
    }
  }
  /*判断当前滚动的高度时候大于最后的p出现在底部的高度值,即是否要加载*/
  function checkIsSlide(){
    var omain=document.getElementById(&#39;main&#39;);
    var obox=getClass(omain,&#39;box&#39;);
    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>

렌더링은 다음과 같습니다.

js를 배워야 하는 학생들은 PHP 중국어 웹사이트

js 비디오 튜토리얼에 주목하세요. 튜토리얼을 무료로 시청하실 수 있습니다!

위 내용은 JS 코드를 공유하여 폭포 흐름 로딩 이미지 효과 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!