原生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实现的listview效果
Apr 28 Javascript
from 表单提交返回值用post或者是get方法实现
Aug 21 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
Jan 07 Javascript
JQuery中基础过滤选择器用法实例分析
May 18 Javascript
JavaScript中的toDateString()方法使用详解
Jun 12 Javascript
深入探讨javascript函数式编程
Oct 11 Javascript
AngularJS仿苹果滑屏删除控件
Jan 18 Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 Javascript
js中的闭包学习心得
Feb 06 Javascript
详解vue中async-await的使用误区
Dec 05 Javascript
js实现双人五子棋小游戏
May 28 Javascript
react antd实现动态增减表单
Jun 03 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
joomla内置的表单验证功能使用方法
2010/06/11 PHP
php生成年月日下载列表的方法
2015/04/24 PHP
php compact 通过变量创建数组
2016/11/15 PHP
php实现微信模拟登陆、获取用户列表及群发消息功能示例
2017/06/28 PHP
IE8下关于querySelectorAll()的问题
2010/05/13 Javascript
jquery动态加载图片数据练习代码
2011/08/04 Javascript
JS刷新框架外页面七种实现代码
2013/02/18 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
2013/09/18 Javascript
NodeJS url验证(url-valid)的使用方法
2013/11/18 NodeJs
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
js实现点击文本框显示日期选择器特效代码分享
2020/05/21 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
2016/05/27 Javascript
jquery插入兄弟节点的操作方法
2016/12/07 Javascript
jQuery获取选中单选按钮radio的值
2016/12/27 Javascript
VUE axios上传图片到七牛的实例代码
2017/07/28 Javascript
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
2018/08/17 Javascript
浅谈Vue render函数在ElementUi中的应用
2018/09/06 Javascript
[02:53]2018年度DOTA2最佳战队-完美盛典
2018/12/17 DOTA
[01:19:33]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第一场 2月2日
2021/03/11 DOTA
Python time模块详解(常用函数实例讲解,非常好)
2014/04/24 Python
浅谈python和C语言混编的几种方式(推荐)
2017/09/27 Python
关于Python的一些学习总结
2018/05/25 Python
python爱心表白 每天都是浪漫七夕!
2018/08/18 Python
Python打开文件、文件读写操作、with方式、文件常用函数实例分析
2020/01/07 Python
详细分析Python可变对象和不可变对象
2020/07/09 Python
HTML5混合开发二维码扫描以及调用本地摄像头
2017/12/27 HTML / CSS
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
2013/09/02 HTML / CSS
HTML5样式控制示例代码
2013/11/27 HTML / CSS
财务管理专业自荐信范文
2013/12/24 职场文书
初中校园之声广播稿
2014/01/15 职场文书
党员对照检查材料思想汇报
2014/09/16 职场文书
企业务虚会发言材料
2014/10/20 职场文书
小学德育工作总结2015
2015/05/12 职场文书
刚学完怎么用Python实现定时任务,转头就跑去撩妹!
2021/06/05 Python