利用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 相关文章推荐
jquery form表单序列化为对象的示例代码
Mar 05 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
Mar 27 Javascript
easyui Draggable组件实现拖动效果
Aug 19 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
Oct 23 Javascript
EasyUI创建对话框的两种方式
Aug 23 Javascript
JS查找字符串中出现最多的字符及个数统计
Feb 04 Javascript
使用JavaScriptCore实现OC和JS交互详解
Mar 28 Javascript
angular4中关于表单的校验示例
Oct 16 Javascript
Vue组件全局注册实现警告框的实例详解
Jun 11 Javascript
vuejs 制作背景淡入淡出切换动画的实例
Sep 01 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
原生javascript中this几种常见用法总结
Feb 24 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
javascript jQuery插件练习
2008/12/24 Javascript
学习ExtJS(一) 之基础前提
2009/10/07 Javascript
根据json字符串生成Html的一种方式
2013/01/09 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
jQuery菜单插件superfish使用指南
2015/04/21 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
详解JavaScript中常用的函数类型
2015/11/18 Javascript
jquery遍历table的tr获取td的值实现方法
2016/05/19 Javascript
微信小程序三级联动选择器使用方法
2020/05/19 Javascript
如何在 JavaScript 中更好地利用数组
2018/09/27 Javascript
vuex 中插件的编写案例解析
2019/06/10 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
Vue页面跳转传递参数及接收方式
2020/09/09 Javascript
微信小程序自定义底部弹出框功能
2020/11/18 Javascript
[03:08]Ti4观战指南上
2014/07/07 DOTA
python如何重载模块实例解析
2018/01/25 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
django配置连接数据库及原生sql语句的使用方法
2019/03/03 Python
Python中super函数用法实例分析
2019/03/18 Python
Python pandas.DataFrame 找出有空值的行
2019/09/09 Python
python 通过视频url获取视频的宽高方式
2019/12/10 Python
Python word文本自动化操作实现方法解析
2020/11/05 Python
英国第一蛋白粉品牌:Myprotein
2016/09/14 全球购物
Sandro法国官网:法国成衣品牌
2019/08/28 全球购物
Footshop法国:购买运动鞋
2020/01/19 全球购物
聚网科技C++面试笔试题
2015/09/01 面试题
中专自荐信
2013/10/13 职场文书
竞选部门副经理的自荐书范文
2014/02/11 职场文书
庆祝三八妇女节标语
2014/10/09 职场文书
党支部考察鉴定意见
2015/06/02 职场文书
SqlServer: 如何更改表的文件组?(进而改变存储位置)
2021/04/05 SQL Server
java设计模式--建造者模式详解
2021/07/21 Java/Android
Log4j.properties配置及其使用
2021/08/02 Java/Android
Linux下使用C语言代码搭建一个简单的HTTP服务器
2022/04/13 Servers