原生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 相关文章推荐
WordPress 照片lightbox效果的运用几点
Jun 22 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
Aug 18 Javascript
JavaScript中数据结构与算法(一):栈
Jun 19 Javascript
js获取Html元素的实际宽度高度的方法
May 19 Javascript
JavaScript实现简单的拖动效果
Jul 02 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
Jul 07 Javascript
js接收并转化Java中的数组对象的方法
Aug 11 Javascript
微信小程序下拉刷新界面的实现
Sep 28 Javascript
vue 实现复制内容到粘贴板clipboard的方法
Mar 17 Javascript
Vue组件Draggable实现拖拽功能
Dec 01 Javascript
vue+iview动态渲染表格详解
Mar 19 Javascript
js实现旋转的星空效果
Nov 01 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/03/18 PHP
php常用字符函数实例小结
2016/12/29 PHP
php静态成员方法和静态的成员属性的使用方法
2017/10/26 PHP
Yii2框架实现利用mpdf创建pdf文件功能示例
2019/02/08 PHP
javascript parseInt 大改造
2009/09/27 Javascript
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
2010/04/25 Javascript
jQuery.Autocomplete实现自动完成功能(详解)
2010/07/13 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
生成二维码方法汇总
2014/12/26 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
2015/09/09 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
2016/04/12 Javascript
jQuery插件实现图片轮播特效
2016/06/16 Javascript
jQuery回到顶部的代码
2016/07/09 Javascript
js+css3实现旋转效果
2017/01/20 Javascript
canvas红包照片实例分享
2017/02/28 Javascript
浅谈如何使用webpack构建多页面应用
2018/05/30 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
浅谈layer弹出层按钮颜色修改方法
2019/09/11 Javascript
[02:53]DOTA2英雄基础教程 山岭巨人小小
2013/12/09 DOTA
[01:04:20]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.29
2020/12/02 DOTA
浅谈python中的数字类型与处理工具
2017/08/02 Python
Python cookbook(数据结构与算法)让字典保持有序的方法
2018/02/18 Python
pandas中apply和transform方法的性能比较及区别介绍
2018/10/30 Python
Python使用pydub库对mp3与wav格式进行互转的方法
2019/01/10 Python
详解Django项目中模板标签及模板的继承与引用(网站中快速布置广告)
2019/03/27 Python
pandas 使用均值填充缺失值列的小技巧分享
2019/07/04 Python
Python PyCharm如何进行断点调试
2019/07/05 Python
Django Serializer HiddenField隐藏字段实例
2020/03/31 Python
Pandas数据分析的一些常用小技巧
2021/02/07 Python
基于CSS3特效之动画:animation的应用
2013/05/09 HTML / CSS
求职简历中个人的自我评价
2013/12/01 职场文书
小学生成长感言
2014/01/30 职场文书
网络技术专业求职信
2014/02/18 职场文书
群众路线剖析材料(四风问题)
2014/10/08 职场文书
《穷人》教学反思
2016/02/19 职场文书
Python尝试实现蒙特卡罗模拟期权定价
2022/04/21 Python