利用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 DOM的学习笔记
Dec 22 Javascript
js设置组合快捷键/tabindex功能的方法
Nov 21 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
May 02 Javascript
input点击后placeholder中的提示消息消失
Jan 15 Javascript
jquery实现轮播图效果
Feb 13 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
Jul 07 Javascript
在 Angular中 使用 Lodash 的方法
Feb 11 Javascript
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
详解js创建对象的几种方法及继承
Apr 12 Javascript
微信小程序获取用户绑定手机号方法示例
Jul 21 Javascript
用js编写留言板
Mar 17 Javascript
vant picker+popup 自定义三级联动案例
Nov 04 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
PHP 高手之路(三)
2006/10/09 PHP
destoon各类调用汇总
2014/06/20 PHP
php遍历解析xml字符串的方法
2016/05/05 PHP
php workerman定时任务的实现代码
2018/12/23 PHP
PDO::_construct讲解
2019/01/27 PHP
showModalDialog 和 showModelessDialog
2007/01/22 Javascript
网络图片延迟加载实现代码 超越jquery控件
2010/03/27 Javascript
jQuery下的几个你可能没用过的功能
2010/08/29 Javascript
jQuery 一个图片切换的插件
2011/10/09 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
2011/11/14 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
2013/04/02 Javascript
javascript将url中的参数加密解密代码
2014/11/17 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
2015/08/10 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
2016/06/17 Javascript
微信小程序  自定义创建详细介绍
2016/10/27 Javascript
详解Angular Reactive Form 表单验证
2017/07/06 Javascript
浅谈js的解析顺序 作用域 严格模式
2017/10/23 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
在vue中实现嵌套页面(iframe)
2020/07/30 Javascript
Python Socket传输文件示例
2017/01/16 Python
Python单体模式的几种常见实现方法详解
2017/07/28 Python
python机器学习理论与实战(六)支持向量机
2018/01/19 Python
详解PANDAS 数据合并与重塑(join/merge篇)
2019/07/09 Python
python实现的汉诺塔算法示例
2019/10/23 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
会计试用期自我评价
2014/09/19 职场文书
社区灵活就业证明
2014/11/03 职场文书
锦旗赠语
2015/06/23 职场文书
2019最新版股权转让及委托持股协议书范本
2019/08/07 职场文书
《曾国藩家书》读后感——读家书,立家风
2019/08/21 职场文书
Golang 实现超大文件读取的两种方法
2021/04/27 Golang
《堡垒之夜》联动《刺客信条》 4月7日正式上线
2022/04/06 其他游戏
动作冒险《Hell Is Us》将采用虚幻5 消灭怪物探索王国
2022/04/13 其他游戏