服务器与运维

当前位置:澳门新莆京娱乐官网 > 服务器与运维 > 绝对定位的实现_javascript技巧_脚本之家

绝对定位的实现_javascript技巧_脚本之家

来源:http://www.drgigabytes.com 作者:澳门新莆京娱乐官网 时间:2019-12-28 22:21

图片 1

JS实现:

2、贰个块框:复制代码 代码如下:

一、布局

图片 2

1、设置父级main的样式:水平居中。2、设置每个块框pin的体制:绝对定位。3、设置窗口滚动事件的监听函数:读取数据增加块框。

js:waterfall.js 1 window.onload=function(卡塔尔国{复制代码 代码如下:waterfall; var dataInt={'data':[{'src':'g .jpg'},{'src':'g .jpg'},{'src':'g .jpg'},{'src':'g .jpg'}]}; window.onscroll=function(卡塔尔(قطر‎{ if{ var oParent=document.getElementById;// 父级对象 for(var i=0;i

html:index.html复制代码 代码如下:

图片 3

1-①:获取父级oParent: 1-②:成立函数getClassObj(卡塔尔-通过父级id和块框类名-获取包括块框的数组。复制代码 代码如下: var oParent=document.getElementById;// 父级对象 var aPin=getClassObj;// 获取存款和储蓄块框pin的数组aPin var num=Math.floor(document.documentElement.clientWidth/aPin[0].offsetWidth卡塔尔国;//获取-每行中能容纳的块框个数-num

3、带头化第生机勃勃行/5个块框:复制代码 代码如下:.pin{ padding: 15px 0 0 15px; float: left;} .box{ padding: 10px; border:1px solid #ccc;} .box img{ width:192px; height:auto;}效果:

二、思路:

五、完毕后的html文件和js文件:

图片 4

图片 5

1、包围块框的器皿:复制代码 代码如下:

图片 6

... ...

四、总括:此为让协调梳理一下思路,表明不太留心连贯,仅供参考。

相对定位方式的瀑布流布局:

oParent.style.cssText='width:'+iPinW*num+'px;margin:0 auto;';//用cssText属性为父级main加多居中样式:定宽+自动水平外边距复制代码 代码如下:function getClassObj{ var obj=parent.getElementsByTagName;//获取 父级的有着子集 var pinS=[];//创立二个数组 用于存款和储蓄类为className的元素 for (var i=0;i复制代码 代码如下:var pinHArr=[];//用于存款和储蓄每列中的全体块框相加的惊人【随着列数的不及此数组的length也跟着变动】 for(var i=0;i复制代码 代码如下: function getminHIndex{ for{ ifreturn i; } } 3:设置窗口滚动事件的监听函数:读取数据增多块框。复制代码 代码如下:var dataInt={'data':[{'src':'g .jpg'},{'src':'g .jpg'},{'src':'g .jpg'},{'src':'g .jpg'}]};//多少个临时的多少对象 //上边定义窗口滚动事件监听函数 window.onscroll=function(State of Qatar{ if{ var oParent=document.getElementById;// 父级对象 for(var i=0;i复制代码 代码如下:function checkscrollside(卡塔尔国{ var oParent=document.getElementById; var aPin=getClassObj; var lastPinH=aPin[aPin.length-1].offsetTop+Math.floor(aPin[aPin.length-1].offsetHeight/2卡塔尔;//创立的惊人:最后二个块框的偏离网页顶上部分+本人高的一半var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//注意解决包容性 var documentH=document.documentElement.clientHeight;//窗口中度 return (lastPinH三、最后效果:

本文由澳门新莆京娱乐官网发布于服务器与运维,转载请注明出处:绝对定位的实现_javascript技巧_脚本之家

关键词: