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 相关文章推荐
javascript教程:关于if简写语句优化的方法
May 17 Javascript
Javascript中的高阶函数介绍
Mar 15 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
Dec 16 Javascript
Jquery使用小技巧汇总
Dec 29 Javascript
JS 实现 ajax 异步浏览器兼容问题
Jan 21 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
详解Angular2中Input和Output用法及示例
May 21 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
Aug 17 Javascript
Vue实现typeahead组件功能(非常靠谱)
Aug 26 Javascript
vue.js路由跳转详解
Aug 28 Javascript
Vue2 配置 Axios api 接口调用文件的方法
Nov 13 Javascript
创建nuxt.js项目流程图解
Mar 13 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
php下通过curl抓取yahoo boss 搜索结果的实现代码
2011/06/10 PHP
使用PHP获取当前url路径的函数以及服务器变量
2013/06/29 PHP
PHP中array_map与array_column之间的关系分析
2014/08/19 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
Javascript中定义方法的另类写法(批量定义js对象的方法)
2011/02/25 Javascript
jquery连缀语法如何实现
2012/11/29 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
2014/05/11 Javascript
jQuery获取页面元素绝对与相对位置的方法
2015/06/10 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
同步异步动态引入js文件的几种方法总结
2016/09/23 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
vue2项目使用sass的示例代码
2017/06/28 Javascript
详解Node项目部署到云服务器上
2017/07/12 Javascript
深入探究AngularJs之$scope对象(作用域)
2017/07/20 Javascript
hammer.js实现图片手势放大效果
2017/08/29 Javascript
JS实现在文本指定位置插入内容的简单示例
2017/12/22 Javascript
Vue 中的compile操作方法
2018/02/26 Javascript
Vue多组件仓库开发与发布详解
2019/02/28 Javascript
js微信分享接口调用详解
2019/07/23 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
2019/11/01 Javascript
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
Windows下搭建python开发环境详细步骤
2020/07/20 Python
详解如何利用Cython为Python代码加速
2018/01/27 Python
Python 实现自动导入缺失的库
2019/10/29 Python
YUV转为jpg图像的实现
2019/12/09 Python
python爬虫开发之Beautiful Soup模块从安装到详细使用方法与实例
2020/03/09 Python
Python3将ipa包中的文件按大小排序
2020/04/17 Python
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
size?瑞典:英国伦敦的球鞋精品店
2018/03/01 全球购物
MONNIER Frères英国官网:源自巴黎女士奢侈品配饰电商平台
2018/12/06 全球购物
化妆品店促销方案
2014/02/24 职场文书
网站美工岗位职责
2014/04/02 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
银行招聘自荐信
2015/03/06 职场文书
python自动统计zabbix系统监控覆盖率的示例代码
2021/04/03 Python