原生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+dom树型菜单类,希望朋友们一起进步
May 03 Javascript
QUnit jQuery的TDD框架
Nov 04 Javascript
jQuery中after()方法用法实例
Dec 25 Javascript
jQuery实现自定义事件的方法
Apr 17 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
Jan 14 Javascript
jQuery如何解决IE输入框不能输入的问题
Oct 08 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
Nov 01 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
Aug 03 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
Nov 30 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
Dec 27 Javascript
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
Vue微信公众号网页分享的示例代码
May 28 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的FTP学习(四)
2006/10/09 PHP
有关php运算符的知识大全
2011/11/03 PHP
PHP静态文件生成类实例
2014/11/29 PHP
php+mysqli实现将数据库中一张表信息打印到表格里的方法
2015/01/28 PHP
PHP遍历XML文档所有节点的方法
2015/03/12 PHP
10个php函数实用却不常见
2015/10/13 PHP
基于jquery ajax 用户无刷新登录方法详解
2012/04/28 Javascript
JS TextArea字符串长度限制代码集合
2012/10/31 Javascript
jQuery事件用法实例汇总
2014/08/29 Javascript
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
JSON字符串和对象相互转换实例分析
2016/06/16 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
2017/02/15 Javascript
gulp安装以及打包合并的方法教程
2017/11/19 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
2018/11/21 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
2019/04/15 Javascript
javascript中call,apply,callee,caller用法实例分析
2019/07/24 Javascript
layui-select动态选中值的例子
2019/09/23 Javascript
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
JS使用Chrome浏览器实现调试线上代码
2020/07/23 Javascript
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
[01:15:12]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#4Newbee VS CDEC
2016/03/03 DOTA
Python中使用dom模块生成XML文件示例
2015/04/05 Python
Python正则表达式使用经典实例
2016/06/21 Python
Python利用ElementTree模块处理XML的方法详解
2017/08/31 Python
python实现俄罗斯方块小游戏
2020/04/24 Python
iphoneX 适配客户端H5页面的方法教程
2017/12/08 HTML / CSS
详解canvas绘制网络字体几种方法
2019/08/27 HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
2020/08/21 HTML / CSS
OSPREY LONDON官网:英国本土皮具品牌
2019/05/31 全球购物
材料物理专业个人求职信
2013/12/15 职场文书
40岁生日感言
2014/02/15 职场文书
会计毕业生自荐书
2014/06/12 职场文书
走进毛泽东观后感
2015/06/04 职场文书
详解JavaScript中的执行上下文及调用堆栈
2021/04/29 Javascript
Golang二维数组的使用方式
2021/05/28 Golang