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

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

原理是：

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  # 实现瀑布流  # js瀑布流加载图片  # js图片加载效果实例代码（延迟加载+瀑布流加载）  # JavaScript实现瀑布流以及加载效果  # javascript实现瀑布流动态加载图片原理  # javascript实现仿百度图片的瀑布流加载效果  # JavaScript实现图片自动加载的瀑布流效果  # 解析javascript瀑布流原理实现图片滚动加载  # javascript瀑布流式图片懒加载实例解析与优化  # javascript瀑布流式图片懒加载实例  # javascript实现瀑布流加载图片原理  # js实现动态加载数据瀑布流  # 组中  # 最小值  # 加载  # 出现在  # 并把  # 小编  # 滚动条  # 都有  # 放在  # 第一个  # 都要  # 在此  # 还会  # 以此类推  # 给大家  # 表现为  # 所述  # 给我留言  # 感谢大家  # 疑问请 

相关文章： 义乌企业网站制作公司,请问义乌比较好的批发小商品的网站是什么？  网站制作服务平台,有什么网站可以发布本地服务信息？  建站VPS选购需注意哪些关键参数？  Thinkphp 中 distinct 的用法解析  香港服务器如何优化才能显著提升网站加载速度？  建站之星如何通过成品分离优化网站效率？  建站之星代理如何获取技术支持？  深圳防火门网站制作公司,深圳中天明防火门怎么编码？  mc皮肤壁纸制作器,苹果平板怎么设置自己想要的壁纸我的世界？  制作销售网站教学视频,销售网站有哪些？  魔方云NAT建站如何实现端口转发？  音乐网站服务器如何优化API响应速度？  linux top下的 minerd 木马清除方法  如何快速搭建高效服务器建站系统？  黑客如何利用漏洞与弱口令入侵网站服务器？  学生网站制作软件,一个12岁的学生写小说，应该去什么样的网站？  上海网站制作网页,上海本地的生活网站有哪些？最好包括生活的各个方面的？  如何通过虚拟主机空间快速建站？  php条件判断怎么写_ifelse和switchcase的使用区别【对比】  西安制作网站公司有哪些,西安货运司机用的最多的app或者网站是什么？  定制建站如何定义？其核心优势是什么？  枣阳网站制作,阳新火车站打的到仙岛湖多少钱？  建站之星与建站宝盒如何选择最佳方案？  定制建站流程步骤详解：一站式方案设计与开发指南  建站之星如何快速更换网站模板？  如何在IIS中新建站点并解决端口绑定冲突？  制作农业网站的软件,比较好的农业网站推荐一下？  国美网站制作流程,国美电器蒸汽鍋怎么用官方网站？  专业制作网站的公司哪家好,建立一个公司网站的费用.有哪些部分,分别要多少钱？  中山网站制作网页,中山新生登记系统登记流程？  网站制作新手教程,新手建设一个网站需要注意些什么？  如何用美橙互联一键搭建多站合一网站？  nginx修改上传文件大小限制的方法  Python路径拼接规范_跨平台处理说明【指导】  如何用西部建站助手快速创建专业网站？  存储型VPS适合搭建中小型网站吗？  网站图片在线制作软件,怎么在图片上做链接？  免费公司网站制作软件,如何申请免费主页空间做自己的网站？  如何在Tomcat中配置并部署网站项目？  宝盒自助建站智能生成技巧：SEO优化与关键词设置指南  建站之星ASP如何实现CMS高效搭建与安全管理？  如何快速辨别茅台真假？关键步骤解析  建站主机如何选？性能与价格怎样平衡？  如何快速配置高效服务器建站软件？  ppt制作免费网站有哪些,ppt模板免费下载网站？  新网站制作渠道有哪些,跪求一个无线渠道比较强的小说网站，我要发表小说？  网站制作企业,网站的banner和导航栏是指什么？  图册素材网站设计制作软件,图册的导出方式有几种？  如何确保西部建站助手FTP传输的安全性？  家族网站制作贴纸教程视频,用豆子做粘帖画怎么制作？