JS瀑布流实现方法实例分析


Posted in Javascript onDecember 19, 2016

本文实例分析了JS瀑布流实现方法。分享给大家供大家参考,具体如下:

描述:

1.每个图片宽度都一样,高度不一样

思路:

1.算出一共有几列(通过视窗总宽度/单个图片宽度得出)

2.根据一共几列*单个图片宽度,设置外围总宽度并水平居中(注:这个宽度应该是计算出来的,而不是定死,因为窗口大小会改变)

3.将第一行图片高度按顺序填充进数组

4.算出第一行图片里高度最短的那个,将第二行的第一张图片添加到其后(绝对定位),添加完第二行第一张,更新他的高度,然后重新计算最短,再开始之前的过程

5.鼠标在滑动滚轮时,继续加载新的图片(注:向上滚动不会加载,也不会一滚动就加载,而是向下滚动到一个临界值时才加载)

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 元素id
*/
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 相关文章推荐
网页中的图片的处理方法与代码
Nov 26 Javascript
浅谈angularJS 作用域
Jul 05 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
Oct 26 Javascript
使用CoffeeScrip优美方式编写javascript代码
Oct 28 Javascript
jquery输入数字随机抽奖特效的简单实现代码
Jun 10 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
Jan 04 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
Feb 18 Javascript
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 Javascript
vuejs实现递归树型菜单组件
Jan 13 Javascript
基于打包工具Webpack进行项目开发实例
May 29 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
Jul 24 Javascript
JS数组转字符串实现方法解析
Sep 04 Javascript
移动端日期插件Mobiscroll.js使用详解
Dec 19 #Javascript
JavaScript闭包和范围实例详解
Dec 19 #Javascript
JS前端笔试题分析
Dec 19 #Javascript
利用vue实现模态框组件
Dec 19 #Javascript
JS中如何实现复选框全选功能
Dec 19 #Javascript
BootStrapValidator校验方式
Dec 19 #Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
Dec 19 #Javascript
You might like
yiic命令时提示“php.exe”不是内部或外部命令的解决方法
2014/12/18 PHP
php通过baihui网API实现读取word文档并展示
2015/06/22 PHP
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
javascript通过class来获取元素实现代码
2013/02/20 Javascript
Javascript简单实现可拖动的div
2013/10/22 Javascript
IE中的File域无法清空使用jQuery重设File域
2014/04/24 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
详解javascript传统方法实现异步校验
2016/01/22 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
2016/12/19 Javascript
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
AngularJS 的$timeout服务示例代码
2017/09/21 Javascript
vue实现行列转换的一种方法
2019/08/06 Javascript
vue 实现单选框设置默认选中值
2019/11/07 Javascript
vue的三种图片引入方式代码实例
2019/11/19 Javascript
jQuery实现倒计时功能完整示例
2020/06/01 jQuery
[59:59]EG vs IG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python中Random和Math模块学习笔记
2015/05/18 Python
在Django的视图(View)外使用Session的方法
2015/07/23 Python
基于python-opencv3的图像显示和保存操作
2019/06/27 Python
Python 获取命令行参数内容及参数个数的实例
2019/12/20 Python
AUC计算方法与Python实现代码
2020/02/28 Python
pyinstaller打包单文件时--uac-admin选项不起作用怎么办
2020/04/15 Python
pycharm 实现本地写代码,服务器运行的操作
2020/06/08 Python
美国知名奢侈美容品牌零售商:Cos Bar
2017/04/21 全球购物
俄罗斯运动、健康和美容产品在线商店:Lactomin.ru
2020/07/23 全球购物
求职信内容考虑哪几点
2013/10/05 职场文书
学校经典推荐信
2013/10/30 职场文书
创业计划书的写作技巧及要点
2014/01/31 职场文书
《奇妙的国际互联网》 教学反思
2014/02/25 职场文书
初中班主任经验交流材料
2014/05/16 职场文书
化工专业求职信
2014/07/01 职场文书
2014年小学工作总结
2014/11/26 职场文书
小学优秀教师事迹材料
2014/12/16 职场文书
oracle覆盖导入dmp文件的2种方法
2021/05/21 Oracle
Python移位密码、仿射变换解密实例代码
2021/06/27 Python
Java 死锁解决方案
2022/05/11 Java/Android