原生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 相关文章推荐
一端时间轮换的广告
Jun 26 Javascript
Firefox getBoxObjectFor getBoundingClientRect联系
Oct 26 Javascript
JavaScript arguments 多参传值函数
Oct 24 Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
May 27 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Jun 05 Javascript
node.js中的fs.open方法使用说明
Dec 17 Javascript
jquery实现增加删除行的方法
Feb 03 Javascript
jQuery实现切换字体大小的方法
Mar 10 Javascript
学习使用bootstrap的modal和carousel
Dec 09 Javascript
js实现下拉框效果(select)
Mar 28 Javascript
js 实现 list转换成tree的方法示例(数组到树)
Aug 18 Javascript
JS数组方法join()用法实例分析
Jan 18 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
Drupal 添加模块出现莫名其妙的错误的解决方法(往往出现在模块较多时)
2011/04/18 PHP
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
Laravel 5 学习笔记
2015/03/06 PHP
PHP explode()函数的几个应用和implode()函数有什么区别
2015/11/05 PHP
Yii2.0中使用js异步删除示例
2017/03/10 PHP
js文字滚动停顿效果代码
2008/06/28 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
2013/04/21 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
2013/05/08 Javascript
Javascript对象属性方法汇总
2013/11/21 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
Angular1.x自定义指令实例详解
2017/03/01 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
关于react-router的几种配置方式详解
2017/07/24 Javascript
vue-cli webpack 引入swiper的操作方法
2018/09/15 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
2018/10/08 Javascript
这应该是最详细的响应式系统讲解了
2019/07/22 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
2020/07/07 Javascript
javascript实现时间日期的格式化的方法汇总
2020/08/06 Javascript
python中文编码问题小结
2014/09/28 Python
Python的Django框架中的数据过滤功能
2015/07/17 Python
详解pandas的外部数据导入与常用方法
2019/05/01 Python
Pyqt5自适应布局实例
2019/12/13 Python
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
Pottery Barn阿联酋:购买家具、家居装饰及更多
2019/12/08 全球购物
证婚人经典证婚词
2014/01/09 职场文书
支部组织生活会方案
2014/06/10 职场文书
公司租车协议书
2015/01/29 职场文书
我们的节日元宵节活动总结
2015/02/06 职场文书
人事行政主管岗位职责
2015/04/09 职场文书
同意转租证明
2015/06/24 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书
Python中快速掌握Data Frame的常用操作
2021/03/31 Python
解决jupyter notebook启动后没有token的坑
2021/04/24 Python
秀!学妹看见都惊呆的Python小招数!【详细语言特性使用技巧】
2021/04/27 Python
基于redis+lua进行限流的方法
2022/07/23 Redis