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 相关文章推荐
js 小贴士一星期合集
Apr 07 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
May 11 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
Sep 01 Javascript
使用jQuery实现星级评分代码分享
Dec 09 Javascript
js密码强度实时检测代码
Mar 02 Javascript
基于JS实现省市联动效果代码分享
Jun 06 Javascript
js+canvas实现滑动拼图验证码功能
Mar 26 Javascript
vuex进阶知识点巩固
May 20 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
May 07 Javascript
js实现自定义右键菜单
May 18 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
Oct 24 Javascript
利用JavaScript模拟京东按键输入功能
Dec 01 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 JSON 数据解析代码
2010/05/26 PHP
PHP中通过fopen()函数访问远程文件示例
2014/11/18 PHP
php对象在内存中的存在形式分析
2015/02/03 PHP
php对象和数组相互转换的方法
2015/05/12 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
2009/12/09 Javascript
offsetParent 算法分析
2010/04/05 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
2013/04/26 Javascript
通过javascript获取iframe里的值示例代码
2013/06/24 Javascript
JavaScript实现找出字符串中第一个不重复的字符
2014/09/03 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
2017/07/12 jQuery
vuejs使用FormData实现ajax上传图片文件
2017/08/08 Javascript
详解Angular5路由传值方式及其相关问题
2018/04/28 Javascript
jQuery使用jsonp实现百度搜索的示例代码
2020/07/08 jQuery
详谈Object.defineProperty 及实现数据双向绑定
2020/07/18 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
2020/09/25 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
2020/10/27 Javascript
写一个Vue loading 插件
2020/11/09 Javascript
[06:24]DOTA2亚洲邀请赛小组赛第三日 TOP10精彩集锦
2015/02/01 DOTA
Python3 安装PyQt5及exe打包图文教程
2019/01/08 Python
Python生成器传参数及返回值原理解析
2020/07/22 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
python编写扎金花小程序的实例代码
2021/02/23 Python
html5 localStorage本地存储_动力节点Java学院整理
2017/07/06 HTML / CSS
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
介绍一下HTTP、HTTPS和SSL
2012/12/16 面试题
介绍一下except的用法和作用
2015/01/22 面试题
历史系自荐信范文
2013/12/24 职场文书
幼儿园小班教师寄语
2014/04/03 职场文书
临床医师个人自我评价
2014/04/06 职场文书
个人四风问题对照检查材料
2014/10/01 职场文书
财务审计整改报告
2014/11/06 职场文书
技术股东合作协议书
2014/12/02 职场文书
2014年底个人工作总结
2015/03/10 职场文书
《搭石》教学反思
2016/02/18 职场文书
Window server 2012 R2 AD域的组策略相关设置
2022/04/28 Servers