原生js实现瀑布流布局


Posted in Javascript onMarch 08, 2017

用js实现瀑布流布局以及通过模拟的数据加载图片,已标记注释

效果如图:

原生js实现瀑布流布局

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>瀑布流布局-JS实现</title>
</head>
<style type="text/css">
  *{
    margin: 0;
    padding: 0;
  }
  #main{
    position: relative;/*整体相对定位,因为每个小图片盒子的位置是通过计算再由绝对定位放置,是需要相对于main盒子*/
  }
  .box{
    padding: 15px 0 0 15px;/*padding为内边距,后面js获取的高度包括padding的距离*/
    float: left;
  }
  .pic{
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 5px #ccc;
  }
  .pic img{
    width: 165px;
    height: auto;
  }
</style>
<script type="text/javascript">
  window.onload=function(){
    var oParent=document.getElementById("main");
    var oBoxs=oParent.getElementsByClassName("box");
    waterfall('main','box');//调用瀑布布局的函数
    var dataInt={"data":[{"src":'23.jpg'},{"src":'24.jpg'},{"src":'25.jpg'}]}//模拟出要加载的图片
    window.onscroll=function(){
      if(checkscrollSlide()){//如果调用函数的返回结果为true
        //将数据块渲染到当前页面底部
        for(var i=0;i<dataInt.data.length;i++){//dataInt对象的data属性的长度
          var oBox=document.createElement('div');
          oBox.className='box';
          oParent.appendChild(oBox);//添加到父元素的最后
          var oPic=document.createElement('div');
          oPic.className='pic';
          oBox.appendChild(oPic);
          var oImg=document.createElement('img');
          oImg.src="img/"+dataInt.data[i].src;
          oPic.appendChild(oImg);
        }
        waterfall('main','box');
      };
    }
    function waterfall(parent,box){
      var oParent=document.getElementById(parent);
      var oBoxs=oParent.getElementsByClassName(box);
      var oBoxW=oBoxs[0].offsetWidth;//计算每个box的宽度
      //计算整个页面显示的列数(页面宽/box的宽)
      var cols=Math.floor(document.documentElement.clientWidth/oBoxW);
      //设置main的宽,居中
      oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0 auto;';
      var hArr=[];//存放每一列高度的数组
      for(var i=0;i<oBoxs.length;i++){
        if(i<cols){
          hArr.push(oBoxs[i].offsetHeight);//将第一行的各个高度加到数组中
        }else{
          var minH=Math.min.apply(null,hArr);//apply方法可以改变数组的指向,因为Math.min方法不支持数组
          var index=getMinhIndex(hArr,minH);
          oBoxs[i].style.position='absolute';
          oBoxs[i].style.top=minH+'px';
          oBoxs[i].style.left=oBoxs[index].offsetLeft+'px';
          hArr[index]+=oBoxs[i].offsetHeight;
        }
      }
    }
    function getMinhIndex(arr,val){
      for(var i in arr){
        if(arr[i]==val){
          return i;
        }

      }
    }
    //检测是否具备了滚动条加载数据块的条件
    function checkscrollSlide(){
      //最后一个盒子的距顶部的高度加上自身高度的一半
      var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+ Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
      //页面滚走的距离
      var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
      //当前浏览器窗口可视区域高度
      var height=document.body.clientHeight||document.documentElement.clientHeight;
      return (lastBoxH<scrollTop+height) ? true : false;
    }
}


</script>
<body>
<div id="main">
  <div class="box">
  <div class="pic">
    <img src="img/0.jpg" />
  </div>
</div>
  <div class="box">
    <div class="pic">
      <img src="img/1.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="img/2.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="img/3.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="img/4.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="img/5.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="img/6.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="img/7.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="img/8.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="img/9.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="img/10.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="img/11.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="img/12.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="img/13.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="img/14.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="img/15.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="img/16.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="img/17.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="img/18.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="img/19.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="img/20.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="img/21.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="img/22.jpg" />
    </div>
  </div>

</div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript显示用户停留时间的简单实例
Aug 05 Javascript
解决jquery版本冲突的有效方法
Sep 02 Javascript
jQuery控制网页打印指定区域的方法
Apr 07 Javascript
javascript中Math.random()使用详解
Apr 15 Javascript
js判断主流浏览器类型和版本号的简单实现代码
May 26 Javascript
深入分析node.js的异步API和其局限性
Sep 05 Javascript
基于JavaScript实现Tab选项卡切换效果
Nov 24 Javascript
Bootstrap CSS组件之大屏幕展播
Dec 17 Javascript
纯js实现的积木(div层)拖动功能示例
Jul 19 Javascript
layui字体图标 loading图标静止不旋转的解决方法
Sep 23 Javascript
微信小程序实现音频文件播放进度的实例代码
Mar 02 Javascript
vue之封装多个组件调用同一接口的案例
Aug 11 Javascript
js仿拉勾网首页穿墙广告效果
Mar 08 #Javascript
JavaScript中的工厂函数(推荐)
Mar 08 #Javascript
老生常谈js中0到底是 true 还是 false
Mar 08 #Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
Mar 08 #Javascript
JS字符串false转boolean的方法(推荐)
Mar 08 #Javascript
原生js实现选项卡功能
Mar 08 #Javascript
js, jQuery实现全选、反选功能
Mar 08 #Javascript
You might like
PHP中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
PHP消息队列实现及应用详解【队列处理订单系统和配送系统】
2019/05/20 PHP
前台js改变Session的值(用ajax实现)
2012/12/28 Javascript
原创jQuery弹出层插件分享
2015/04/02 Javascript
javascript实现继承的简单实例
2015/07/26 Javascript
java必学必会之static关键字
2015/12/03 Javascript
js实现正则匹配中文标点符号的方法
2015/12/23 Javascript
jquery实现图片放大点击切换
2017/06/06 jQuery
vue watch自动检测数据变化实时渲染的方法
2018/01/16 Javascript
vue注册组件的几种方式总结
2018/03/08 Javascript
VUE 3D轮播图封装实现方法
2018/07/03 Javascript
小程序页面动态配置实现方法
2019/02/05 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
[01:30]DOTA2上海特锦赛现场采访 Loda倾情献唱
2016/03/25 DOTA
[01:56]无止竞 再出发——中国军团出征2017年DOTA2国际邀请赛
2017/07/05 DOTA
[46:50]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
tensorflow建立一个简单的神经网络的方法
2018/02/10 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
python日志模块logbook使用方法
2019/09/19 Python
Pandas聚合运算和分组运算的实现示例
2019/10/17 Python
Python中的全局变量如何理解
2020/06/04 Python
什么是makefile? 如何编写makefile?
2012/08/08 面试题
介绍一下Java中的static关键字
2012/05/12 面试题
咨询公司各岗位职责
2013/12/02 职场文书
文秘人员工作职责
2014/01/31 职场文书
前处理班长职位说明书
2014/03/01 职场文书
公司活动方案范文
2014/03/06 职场文书
关于热爱祖国的演讲稿
2014/05/04 职场文书
电子信息专业应届生自荐信
2014/06/04 职场文书
股东授权委托书范本
2014/09/13 职场文书
师德师风整改措施
2014/10/24 职场文书
防汛工作情况汇报
2014/10/28 职场文书
出国留学自荐信模板
2015/03/06 职场文书
SQL Server查询某个字段在哪些表中存在
2022/03/03 SQL Server
详解MySQL的主键查询为什么这么快
2022/04/03 MySQL