原生JavaScript实现瀑布流布局


Posted in Javascript onJune 28, 2020

本文实例讲解了原生JavaScript实现瀑布流布局详细代码,分享给大家供大家参考,具体内容如下

效果图:

原生JavaScript实现瀑布流布局

具体代码:

window.onload=function(){

 waterfall('main','pin');

 var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};
 
 window.onscroll=function(){
  if(checkscrollside()){
   var oParent = document.getElementById('main');// 父级对象
   for(var i=0;i<dataInt.data.length;i++){
    var oPin=document.createElement('div'); //添加 元素节点
    oPin.className='pin';     //添加 类名 name属性
    oParent.appendChild(oPin);    //添加 子节点
    var oBox=document.createElement('div');
    oBox.className='box';
    oPin.appendChild(oBox);
    var oImg=document.createElement('img');
    oImg.src='./images/'+dataInt.data[i].src;
    oBox.appendChild(oImg);
   }
   waterfall('main','pin');
  };
 }
}


/*
 parend 父级id
 pin 元素class
*/
function waterfall(parent,pin){
 var oParent=document.getElementById(parent);// 父级对象
 var aPin=getClassObj(oParent,pin);// 获取存储块框pin的数组aPin
 var iPinW=aPin[0].offsetWidth;// 一个块框pin的宽
 var num=Math.floor(document.documentElement.clientWidth/iPinW);//每行中能容纳的pin个数【窗口宽度除以一个块框宽度】
 oParent.style.cssText='width:'+iPinW*num+'px;margin:0 auto;';//设置父级居中样式:定宽+自动水平外边距

 var pinHArr=[];//用于存储 每列中的所有块框相加的高度。
 for(var i=0;i<aPin.length;i++){//遍历数组aPin的每个块框元素
  var pinH=aPin[i].offsetHeight;
  if(i<num){
   pinHArr[i]=pinH; //第一行中的num个块框pin 先添加进数组pinHArr
  }else{
   var minH=Math.min.apply(null,pinHArr);//数组pinHArr中的最小值minH
   var minHIndex=getminHIndex(pinHArr,minH);
   aPin[i].style.position='absolute';//设置绝对位移
   aPin[i].style.top=minH+'px';
   aPin[i].style.left=aPin[minHIndex].offsetLeft+'px';
   //数组 最小高元素的高 + 添加上的aPin[i]块框高
   pinHArr[minHIndex]+=aPin[i].offsetHeight;//更新添加了块框后的列高
  }
 }
}

/*
 通过父级和子元素的class类 获取该同类子元素的数组
*/
function getClassObj(parent,className){
 var obj=parent.getElementsByTagName('*');//获取 父级的所有子集
 var pinS=[];//创建一个数组 用于收集子元素
 for (var i=0;i<obj.length;i++) {//遍历子元素、判断类别、压入数组
  if (obj[i].className==className){
   pinS.push(obj[i]);
  }
 };
 return pinS;
}

/*
 获取 pin高度 最小值的索引index
*/
function getminHIndex(arr,minH){
 for(var i in arr){
  if(arr[i]==minH){
   return i;
  }
 }
}

/*
 判断加载图片的条件
*/
function checkscrollside(){
 var oParent=document.getElementById('main');
 var aPin=getClassObj(oParent,'pin');
 var lastPinH=aPin[aPin.length-1].offsetTop+Math.floor(aPin[aPin.length-1].offsetHeight/2);//创建【触发添加块框函数waterfall()】的高度:最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)
 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//注意解决兼容性
 var documentH=document.documentElement.clientHeight;//页面高度
 return (lastPinH<scrollTop+documentH)?true:false;//到达指定高度后 返回true,触发waterfall()函数
}

以上就是本文的全部内容,希望对大家实现瀑布流布局有所帮助。

Javascript 相关文章推荐
javascript之typeof、instanceof操作符使用探讨
May 19 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
Jan 07 Javascript
jquery中获得元素尺寸和坐标的方法整理
May 18 Javascript
angular中使用路由和$location切换视图
Jan 23 Javascript
javascript实现图片循环渐显播放的方法
Feb 24 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
Jul 10 Javascript
使用vue-cli编写vue插件的方法
Feb 26 Javascript
Vue.js 2.x之组件的定义和注册图文详解
Jun 19 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
Aug 16 Javascript
微信小程序云函数使用mysql数据库过程详解
Aug 07 Javascript
webpack 如何解析代码模块路径的实现
Sep 04 Javascript
vue项目创建步骤及路由router
Jan 14 Javascript
js实现瀑布流的三种方式比较
Jun 28 #Javascript
详解AngularJS中自定义过滤器
Dec 28 #Javascript
js运动应用实例解析
Dec 28 #Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
Dec 28 #Javascript
浅析JS运动
Dec 28 #Javascript
基于JavaScript实现网页倒计时自动跳转代码
Dec 28 #Javascript
js时间戳转为日期格式的方法
Dec 28 #Javascript
You might like
php实现简单洗牌算法
2013/06/18 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
JavaScript 变量作用域分析
2011/07/04 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
2013/05/13 Javascript
JavaScript学习笔记之DOM基础 2.4
2015/08/14 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
2015/09/27 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
2016/01/10 Javascript
jquery横向纵向鼠标滚轮全屏切换
2017/02/27 Javascript
jQuery实现html双向绑定功能示例
2017/10/09 jQuery
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
2018/03/13 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
关于layui表单中按钮自动提交的解决方法
2019/09/09 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
2020/07/26 Javascript
vue-model实现简易计算器
2020/08/17 Javascript
[05:48]DOTA2英雄梦之声vol21 屠夫
2014/06/20 DOTA
Python : turtle色彩控制实例详解
2020/01/19 Python
python实例化对象的具体方法
2020/06/17 Python
Python远程方法调用实现过程解析
2020/07/28 Python
基于Python中Remove函数的用法讨论
2020/12/11 Python
python爬虫scrapy框架的梨视频案例解析
2021/02/20 Python
利用CSS3的flexbox实现水平垂直居中与三列等高布局
2016/09/12 HTML / CSS
中国综合性网上购物商城:当当(网上卖书起家)
2016/11/16 全球购物
英国著名的小众美容品牌网站:Alyaka
2017/08/08 全球购物
Lookfantastic阿联酋官网:英国知名美妆护肤购物网站
2020/05/26 全球购物
什么是serialVersionUID
2016/03/04 面试题
机械设计及其自动化专业推荐信
2013/10/31 职场文书
小学生成长感言
2014/01/30 职场文书
四年级数学教学反思
2014/02/02 职场文书
大学生个人实习的自我评价
2014/02/15 职场文书
教师学习八项规定六项禁令思想汇报
2014/09/27 职场文书
因身体原因离职的辞职信范文
2015/05/12 职场文书
2015年政府采购工作总结
2015/05/21 职场文书
贷款工作证明模板
2015/06/12 职场文书
公司规章制度范本
2015/08/03 职场文书
python区块链持久化和命令行接口实现简版
2022/05/25 Python