原生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现实多行信息
Aug 26 Javascript
JS Array对象入门分析
Oct 30 Javascript
DWZ table的原生分页浅谈
Mar 01 Javascript
javascript对象的使用和属性操作示例详解
Mar 02 Javascript
jQuery获取选中内容及设置元素属性的方法
Jul 09 Javascript
Backbone.js的一些使用技巧
Jul 01 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
Jun 17 Javascript
js Canvas实现的日历时钟案例分享
Dec 25 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
Oct 01 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
Jun 04 Javascript
node.js基础知识汇总
Aug 25 Javascript
JavaScript实现点击图片换背景
Nov 20 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 和 MYSQL
2006/10/09 PHP
复杂检索数据并分页显示的处理方法
2006/10/09 PHP
PHP屏蔽蜘蛛访问代码及常用搜索引擎的HTTP_USER_AGENT
2013/03/06 PHP
PHP中基本HTTP认证技巧分析
2015/03/16 PHP
PHP7.0版本备注
2015/07/23 PHP
WordPress中用于创建以及获取侧边栏的PHP函数讲解
2015/12/29 PHP
PHP 计算两个特别大的整数实例代码
2018/05/07 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
2011/10/23 Javascript
查看大图功能代码jquery版
2013/11/05 Javascript
javascript设计模式之解释器模式详解
2014/06/05 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
2016/03/25 Javascript
Angular value与ngValue区别详解
2019/11/27 Javascript
python 正则式 概述及常用字符
2009/05/07 Python
Python使用MD5加密字符串示例
2014/08/22 Python
python实现的简单抽奖系统实例
2015/05/22 Python
rabbitmq(中间消息代理)在python中的使用详解
2017/12/14 Python
用Python+OpenCV对比图像质量的几种方法
2019/07/15 Python
python的scipy实现插值的示例代码
2019/11/12 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
详解python opencv、scikit-image和PIL图像处理库比较
2019/12/26 Python
Django Session和Cookie分别实现记住用户登录状态操作
2020/07/02 Python
CSS3动画效果回调处理详解
2014/12/10 HTML / CSS
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
详解Html5原生拖拽操作
2018/01/12 HTML / CSS
美国机场停车位预订:About Airport Parking
2018/03/26 全球购物
BabyBjörn婴儿背带法国官网:BabyBjorn法国
2018/06/16 全球购物
阿姆斯特丹杜莎夫人蜡像馆官方网站:Madame Tussauds Amsterdam
2019/03/12 全球购物
Book Depository欧盟:一家领先的国际图书零售商
2019/05/21 全球购物
介绍一下linux文件系统分配策略
2013/02/25 面试题
中间件分为哪几类
2016/09/18 面试题
大四自我鉴定
2014/02/08 职场文书
中学校庆方案
2014/03/17 职场文书
带香烟到学校抽的检讨书
2014/09/25 职场文书
优秀党务工作者先进事迹材料
2014/12/25 职场文书
办公室卫生管理制度
2015/08/04 职场文书