原生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 Sort 表格排序
Oct 31 Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
Apr 07 Javascript
js图片延迟加载的实现方法及思路
Jul 22 Javascript
JQuery显示、隐藏div的几种方法简明总结
Apr 16 Javascript
input 禁止输入特殊字符的四种实现方式
Aug 24 Javascript
Web前端框架bootstrap实战【第一次接触使用】
Dec 28 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
Sep 04 Javascript
微信小程序的日期选择器的实例详解
Sep 29 Javascript
vue2.0 实现页面导航提示引导的方法
Mar 13 Javascript
Vue最新防抖方案(必看篇)
Oct 30 Javascript
javascript 内存模型实例详解
Apr 18 Javascript
react 原生实现头像滚动播放的示例
Apr 21 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上传文件的增强函数
2010/07/21 PHP
支持png透明图片的php生成缩略图类分享
2015/02/08 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
PHP回调函数概念与用法实例分析
2017/11/03 PHP
javascript 写类方式之五
2009/07/05 Javascript
innerHTML 和 getElementsByName 在IE下面的bug 的解决
2010/04/09 Javascript
基于jquery用于查询操作的实现代码
2010/05/10 Javascript
基于Asp.net与Javascript控制的日期控件
2010/05/22 Javascript
flexigrid 参数说明
2010/11/23 Javascript
js实现翻页后保持checkbox选中状态的实现方法
2012/11/03 Javascript
javascript检查浏览器是否支持flash的实现代码
2014/08/14 Javascript
Javascript 事件冒泡机制详细介绍
2016/10/10 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
2017/04/27 jQuery
JS通过位运算实现权限加解密
2018/08/14 Javascript
JS添加或删除HTML dom元素的方法实例分析
2019/03/05 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
js 计算月/周的第一天和最后一天代码
2020/02/01 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
2020/09/12 Javascript
python的即时标记项目练习笔记
2014/09/18 Python
python实现学生信息管理系统
2020/04/05 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
windows下python安装pip图文教程
2018/05/25 Python
Django框架组成结构、基本概念与文件功能分析
2019/07/30 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
pytorch中图像的数据格式实例
2020/02/11 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
美国知名的女性服饰品牌:LOFT(洛芙特)
2016/08/05 全球购物
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
迪卡侬荷兰官网:Decathlon荷兰
2017/10/29 全球购物
Bata印度官网:源自欧洲舒适鞋履品牌
2020/01/30 全球购物
会计专业导师推荐信
2014/03/08 职场文书
重大事项社会稳定风险评估方案
2014/06/15 职场文书
护士辞职信怎么写
2015/02/27 职场文书
大二学年个人总结
2015/03/03 职场文书