JS瀑布流技术总结
2016-02-12 21:08
603 查看
JS瀑布流技术总结
教程及代码来自极客学院http://www.jikexueyuan.com/course/218_3.html?ss=1
使用JS做瀑布流效果,最重要的技术要点是将所有图片中每一栏(column)看成一个整体,以第一行的图片高度作为基本基调,以后每安排一个图片的位置,都要查找之前图片整体中哪一栏的整体高度最小,把图片放在那一栏下面,然后更新那一栏的整体高度;下一张图片再次整体遍历各图片栏的高度,找出最小高度图片栏,以此类推。
基本步骤:
1. 获得整体图片的container,将container中所有id为box的标签储存到一个数组中
2. 获得一张图片的宽度(前提要在CSS中将所有图片的宽度设为一致),然后通过Math的floor方法计算出一个屏幕宽度内最多能放多少图片,以奠定第一行的基础
3. 用一个数组储存所有图片栏的高度(在遍历中,第一次遍历储存了第一行所有图片的高度),当i大于等于栏的数目时,开始所有图片的自适应
4. 在自适应中,使用Math.min.apply的方法找出所有图片中最小那栏的整体高度,然后找出所有图片中最小整体高度的图品栏最后的一个图片,获取该图片距离top和left的数据
5. 最后记得更新图片栏高度
一些特别技巧的应用:
1. 因为BoxHeightArr是对象的数组,因此不能直接用Math.min,于是用了Math.min.apply()的方法,将this设为null即可
2. 用JS设置一些表示距离的CSS元素时,记得最后加上单位如px
3. getElementsByTagName('*')星号可以获得所有的标签
4. style.cssText可以直接设置某元素的CSS内容
教程及代码来自极客学院http://www.jikexueyuan.com/course/218_3.html?ss=1
使用JS做瀑布流效果,最重要的技术要点是将所有图片中每一栏(column)看成一个整体,以第一行的图片高度作为基本基调,以后每安排一个图片的位置,都要查找之前图片整体中哪一栏的整体高度最小,把图片放在那一栏下面,然后更新那一栏的整体高度;下一张图片再次整体遍历各图片栏的高度,找出最小高度图片栏,以此类推。
基本步骤:
1. 获得整体图片的container,将container中所有id为box的标签储存到一个数组中
2. 获得一张图片的宽度(前提要在CSS中将所有图片的宽度设为一致),然后通过Math的floor方法计算出一个屏幕宽度内最多能放多少图片,以奠定第一行的基础
3. 用一个数组储存所有图片栏的高度(在遍历中,第一次遍历储存了第一行所有图片的高度),当i大于等于栏的数目时,开始所有图片的自适应
4. 在自适应中,使用Math.min.apply的方法找出所有图片中最小那栏的整体高度,然后找出所有图片中最小整体高度的图品栏最后的一个图片,获取该图片距离top和left的数据
5. 最后记得更新图片栏高度
window.onload = function(){ imgLocation('container','box'); }; function imgLocation(parent, content){ var cparent = document.getElementById(parent);//获得container var ccontent = getChildElement(cparent, content);//使用函数获得container里面所有id为box的标签 var imgWidth = ccontent[0].offsetWidth;//获得一个图片的宽度,以计算一个屏幕宽度里改放多少图片 var cols = Math.floor(document.documentElement.clientWidth / imgWidth);//用floor方法将col转换为整数 cparent.style.cssText = 'width:'+imgWidth*cols +'px;margin:0 auto;';//将container的宽度换为栏数*图片宽度 //下面开始让所有图片的height适应 var BoxHeightArr=[];//数组储存所有图片栏的高度 for(var i = 0; i< ccontent.length; i++) { //第一行 if(i<cols) { BoxHeightArr.push(ccontent[i].offsetHeight); }else{ var minHeight = Math.min.apply(null, BoxHeightArr);//找出所有图片中最小那栏的整体高度 var minIndex = getminheightLocation(BoxHeightArr, minHeight);//找出所有图片中最小整体高度那栏图片的最后一张的index ccontent[i].style.position = 'absolute'; ccontent[i].style.top = minHeight +'px'; ccontent[i].style.left = ccontent[minIndex].offsetLeft + 'px'; BoxHeightArr[minIndex] += ccontent[i].offsetHeight;//更新图片栏高度 } } }; function getminheightLocation(BoxHeightArr, minHeight){ for(var i in BoxHeightArr){ if(BoxHeightArr[i] == minHeight){ return i; } } } function getChildElement(parent,content){ var contentArr = []; var allcontent = parent.getElementsByTagName("*");//获得所有的标签 for(var i = 0; i < allcontent.length; i++)//遍历allcontent这个数组里的标签以寻找到box标签,一寻找到就将box标签的对象加入到contentArr这个数组里 { if(allcontent[i].className == content) { contentArr.push(allcontent[i]); } } return contentArr;//返回含有所有box标签的数组 }
一些特别技巧的应用:
1. 因为BoxHeightArr是对象的数组,因此不能直接用Math.min,于是用了Math.min.apply()的方法,将this设为null即可
2. 用JS设置一些表示距离的CSS元素时,记得最后加上单位如px
3. getElementsByTagName('*')星号可以获得所有的标签
4. style.cssText可以直接设置某元素的CSS内容
相关文章推荐
- 手机图片js在线剪切
- JS固定侧边栏教程总结
- .Net后台使用RegisterClientScriptBlock和RegisterStartupScript调用前台的JS 区别
- javascript基础:字符串自动转换为数字类型
- JavaScript【基础篇】
- JavaScript学习过程
- JSTL与EL
- ajax 提交post get 数据,得到json结果解析
- js 中对象--对象结构(原型链基础解析)
- JAVASCRIPT的一些知识点梳理
- [bzoj1017]: [JSOI2008]魔兽地图DotR
- JavaScript实现点击单元格改变背景色的方法
- JavaScript实现弹出模态窗体并接受传值的方法
- JavaScript判断表单为空及获取焦点的方法
- JS回到顶部效果设计总结
- JavaScript判断表单为空及获取焦点的方法
- JavaScript实现弹出模态窗体并接受传值的方法
- JavaScript实现点击单元格改变背景色的方法
- 原生javascript实现图片无缝滚动效果
- 原生javascript实现自动更新的时间日期