欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

利用JS实现简单的瀑布流加载图片效果

程序员文章站 2023-01-19 15:33:29
今天学习了一个瀑布流加载效果,很多网站都有瀑布流效果,瀑布流就是很多产品显示在网页上,宽相同,高度不同,表现为多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并...

今天学习了一个瀑布流加载效果,很多网站都有瀑布流效果,瀑布流就是很多产品显示在网页上,宽相同,高度不同,表现为多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。

原理是:

1.设定一行中的列数;

2.取第一行中每一个div的高度并把每一个高度放进一个数组中;

3.算出数组中最小高度的index值;

4.把第二行的第一个div放到最小高度的div的下方并把重新算出的高度值放进数组中,重新计算最小高度的index值;

5.以此类推实现多栏布局的瀑布流效果;

6.如果最后一张div的高度已滚动出现在底部时创建新的div添加到最后一张的后面,不断循环以达到加载效果;接下来代码实现。

<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.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"}]
    };
     
    /*滚动条滚动时触发的事件*/
    window.onscroll=function(){
      if(checkisslide()){ //结果返回是true则执行
        var omain=document.getelementbyid('main');
        /*添加div到页面上*/
        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都要重新执行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值
        /*把之后的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; //数组中的最小值加上已放在下方的div的高度值并重新循环
      }
    }
     
  }
 
  /*获取父元素下的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数组中的最小值minh的index值*/
  function gethindex(arr,minh){
    for(var k=0;k<arr.length;k++){
      if(arr[k]==minh){
        return k;
      }
    }
  }
  /*判断当前滚动的高度时候大于最后的div出现在底部的高度值,即是否要加载*/
  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>

效果图如下:

利用JS实现简单的瀑布流加载图片效果

以上所述是小编给大家介绍的利用js实现简单的瀑布流加载图片效果,希望对大家有所帮助