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


Posted in Javascript onApril 22, 2017

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

原理是:

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实现简单的瀑布流加载图片效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
手把手教你自己写一个js表单验证框架的方法
Sep 14 Javascript
JavaScript设计模式之装饰者模式介绍
Dec 28 Javascript
jQuery中toggleClass()方法用法实例
Jan 05 Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 Javascript
js改变css样式的三种方法推荐
Jun 28 Javascript
jQuery操作json常用方法示例
Jan 04 Javascript
ReactNative实现图片上传功能的示例代码
Jul 11 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
Aug 17 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
Aug 01 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
Dec 10 Javascript
微信小程序实现吸顶特效
Jan 08 Javascript
原生js实现表格翻页和跳转
Sep 29 Javascript
jQuery实现百度登录框的动态切换效果
Apr 21 #jQuery
HTML5+Canvas调用手机拍照功能实现图片上传(下)
Apr 21 #Javascript
微信JS-SDK选取手机照片上传功能
Apr 21 #Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
Apr 21 #Javascript
HTML5实现微信拍摄上传照片功能
Apr 21 #Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 #jQuery
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
Apr 21 #Javascript
You might like
全国FM电台频率大全 - 6 辽宁省
2020/03/11 无线电
PHP写MySQL数据 实现代码
2009/06/15 PHP
PHP读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
php 无法加载mcrypt.dll的解决办法
2013/04/03 PHP
ThinkPHP模板引擎之导入资源文件方法详解
2014/06/18 PHP
php头像上传预览实例代码
2017/05/02 PHP
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
一个报数游戏js版(约瑟夫环问题)
2010/08/05 Javascript
jQuery添加和删除指定标签的方法
2015/12/16 Javascript
js+html5实现canvas绘制网页时钟的方法
2016/05/21 Javascript
AngularJS基础 ng-include 指令示例讲解
2016/08/01 Javascript
聊聊Vue.js的template编译的问题
2017/10/09 Javascript
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
微信小程序云开发之模拟后台增删改查
2019/05/16 Javascript
浅析JS中NEW的实现原理及重写
2020/02/20 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
2020/04/20 Javascript
[01:33]一分钟玩转DOTA2第三弹:DOTA2&DotA快捷操作大对比
2014/06/04 DOTA
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
解决每次打开pycharm直接进入项目的问题
2018/10/28 Python
详解如何为eclipse安装合适版本的python插件pydev
2018/11/04 Python
python用pip install时安装失败的一系列问题及解决方法
2020/02/24 Python
python将数据插入数据库的代码分享
2020/08/16 Python
分享一个H5原生form表单的checkbox特效代码
2018/02/26 HTML / CSS
Puma印度官网:德国运动品牌
2019/10/06 全球购物
美国鲜花递送:UrbanStems
2021/01/04 全球购物
几个Shell Script面试题
2012/08/31 面试题
财务人员个人自荐信范文
2013/09/26 职场文书
银行财务部实习生的自我鉴定
2013/11/27 职场文书
个人素质的自我评价分享
2013/12/16 职场文书
市场部经理岗位职责
2014/04/10 职场文书
软件项目开发计划书
2014/05/01 职场文书
保险专业求职信
2014/07/07 职场文书
诉讼授权委托书
2014/10/15 职场文书
2015年电气技术员工作总结
2015/07/24 职场文书
工伤调解协议书
2016/03/21 职场文书
CPU不支持Windows11系统怎么办
2021/11/21 数码科技