原生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 相关文章推荐
jQuery使用手册之一
Mar 24 Javascript
用js生产批量批处理执行命令
Jul 28 Javascript
json 入门基础教程 推荐
Oct 31 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
Sep 04 Javascript
JS实现仿京东淘宝竖排二级导航
Dec 08 Javascript
原生javascript实现图片无缝滚动效果
Feb 12 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
Jul 07 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
Dec 23 Javascript
vue iView 上传组件之手动上传功能
Mar 16 Javascript
ES6扩展运算符和rest运算符用法实例分析
May 23 Javascript
echarts实现晶体球面投影的实例教程
Oct 10 Javascript
vue实现input输入模糊查询的三种方式
Aug 14 Vue.js
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实现的九九乘法口诀表简洁版
2014/07/28 PHP
php微信开发之批量生成带参数的二维码
2016/06/26 PHP
yii2利用自带UploadedFile实现上传图片的示例
2017/02/16 PHP
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
JavaScript 空位补零实现代码
2010/02/26 Javascript
JQuery从头学起第三讲
2010/07/06 Javascript
用jquery实现自定义风格的滑动条实现代码
2011/04/26 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
2012/07/23 Javascript
关于JS控制代码暂停的实现方法分享
2012/10/11 Javascript
JavaScript包装对象使用介绍
2013/08/29 Javascript
JavaScript编程的10个实用小技巧
2014/04/18 Javascript
nodejs批量修改文件编码格式
2015/01/22 NodeJs
在AngularJS中如何使用谷歌地图把当前位置显示出来
2016/01/25 Javascript
原生js实现放大镜效果
2017/01/11 Javascript
Node接收电子邮件的实例代码
2017/07/21 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
2018/08/09 jQuery
Vue中util的工具函数实例详解
2019/07/08 Javascript
python 统计代码行数简单实例
2017/05/04 Python
Python实现的插入排序算法原理与用法实例分析
2017/11/22 Python
利用Tkinter(python3.6)实现一个简单计算器
2017/12/21 Python
python使用phoenixdb操作hbase的方法示例
2019/02/28 Python
Django 创建/删除用户的示例代码
2019/07/24 Python
python进阶之自定义可迭代的类
2019/08/20 Python
在Tensorflow中实现梯度下降法更新参数值
2020/01/23 Python
解决python多线程报错:AttributeError: Can't pickle local object问题
2020/04/08 Python
matlab中二维插值函数interp2的使用详解
2020/04/22 Python
CSS3实现线性渐变用法示例代码详解
2020/08/07 HTML / CSS
Html5之title吸顶功能
2018/06/04 HTML / CSS
欧舒丹英国官网:购买欧舒丹护手霜等明星产品
2017/01/17 全球购物
Swanson中国官网:美国斯旺森健康产品公司
2021/03/01 全球购物
播音主持专业个人自我评价
2014/01/09 职场文书
预备党员思想汇报范文
2014/01/11 职场文书
自我鉴定书面格式
2014/01/13 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
党性修养心得体会2016
2016/01/21 职场文书
基于Python实现流星雨效果的绘制
2022/03/18 Python