Share JS code to implement waterfall flow loading image effect

Today I learned a waterfall flow loading effect. Many websites have waterfall flow effects. Let me share with you how to use JS to achieve a simple waterfall flow loading image effect through this article. Friends who need it can refer to it

Today I learned a waterfall flow loading effect. Many websites have a waterfall flow effect. The waterfall flow is a lot of products displayed on the web page, with the same width and different heights. It is a multi-column layout. As the page scroll bar scrolls down, this layout Data blocks are also continuously loaded and appended to the current tail.

The principle is:

1. Set the number of columns in a row;

2. Take the height of each p in the first row and merge Put each height into an array;

3. Calculate the index value of the minimum height in the array;

4. Put the first p in the second row to the p of the minimum height and put the recalculated height value into the array to recalculate the index value of the minimum height;

5. And so on to achieve the waterfall flow effect of multi-column layout;

6. If the height of the last p picture has been scrolled and appears at the bottom, a new p is created and added to the back of the last picture, and the loop is continued to achieve the loading effect; the following code is implemented.

<p id="main">
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/0.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/1.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/2.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/3.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/4.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/5.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/6.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/7.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/8.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/9.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/10.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/11.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/12.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/13.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/14.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/15.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/16.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/17.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/18.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/19.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/20.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/21.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/22.jpg"  class="lazy"   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 code:

##

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

The rendering is as follows:

Students who need to learn js please pay attention to the php Chinese website

js video tutorial, many js online video tutorials can be watched for free!

The above is the detailed content of Share JS code to implement waterfall flow loading image effect. For more information, please follow other related articles on the PHP Chinese website!