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 相关文章推荐
How to Auto Include a Javascript File
Feb 02 Javascript
获取URL地址中的文件名和参数的javascript代码
Sep 02 Javascript
js操作二级联动实现代码
Jul 27 Javascript
jQuery bind事件使用详解
May 05 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
Oct 16 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
Jun 30 Javascript
jQuery简单动画变换效果实例分析
Jul 04 Javascript
js创建对象几种方式的优缺点对比
Sep 28 Javascript
Angular网络请求的封装方法
May 22 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
Jun 20 Javascript
解决vue项目中出现Invalid Host header的问题
Nov 17 Javascript
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
移动端日期插件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统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
php常用图片处理类
2016/03/16 PHP
thinkPHP简单遍历数组方法分析
2016/05/16 PHP
smarty自定义函数用法示例
2016/05/20 PHP
深入理解php printf() 输出格式化的字符串
2016/05/23 PHP
PHP获取用户客户端真实IP的解决方案
2016/10/10 PHP
PHP读取XML格式文件的方法总结
2017/02/27 PHP
php简单处理XML数据的方法示例
2017/05/19 PHP
使用PHP开发留言板功能
2019/11/19 PHP
mouse_on_title.js
2006/08/25 Javascript
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
js中有关IE版本检测
2012/01/04 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
使用Vue.js创建一个时间跟踪的单页应用
2016/11/28 Javascript
Vue2学习笔记之请求数据交互vue-resource
2017/02/23 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
微信小程序实现手指触摸画板
2018/07/09 Javascript
详解小程序如何改变onLoad的执行时机
2019/11/01 Javascript
微信小程序 scroll-view 实现锚点跳转功能
2019/12/12 Javascript
[03:04]DOTA2超级联赛专访ZSMJ “莫名其妙”的逆袭
2013/05/23 DOTA
[00:32]2018DOTA2亚洲邀请赛iG出场
2018/04/03 DOTA
Python内置函数bin() oct()等实现进制转换
2012/12/30 Python
100行python代码实现跳一跳辅助程序
2018/01/15 Python
django中forms组件的使用与注意
2019/07/08 Python
python之openpyxl模块的安装和基本用法(excel管理)
2021/02/03 Python
《燕子专列》教学反思
2014/02/21 职场文书
群众路线教育实践活动批评与自我批评
2014/09/15 职场文书
基层党组织整改方案
2014/10/25 职场文书
2015年秋季小学开学典礼主持词
2015/07/16 职场文书
2015年小学教师培训工作总结
2015/07/21 职场文书
新教师教学工作总结
2015/08/14 职场文书
小学班级口号大全
2015/12/25 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL
Go 内联优化让程序员爱不释手
2022/06/21 Golang