offsetParent的使用：offsetParent是自身和祖先節(jié)點(diǎn)都需要定位的額，但是著段代碼中都沒有定位存在過(guò)？

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無(wú)標(biāo)題文檔</title>
<style>
body {margin: 0;}
#ul1 {width: 1080px; margin: 100px auto 0;}
li { width: 247px; list-style: none; float: left; margin-right: 10px; }
li div {border: 1px solid #000; padding: 10px; margin-bottom: 10px;}
li div img { width: 225px; display: block;}
</style>
<script src="ajax.js"></script>
<script>
window.onload = function() {

var oUl = document.getElementById('ul1');
var aLi = oUl.getElementsByTagName('li');
var iLen = aLi.length;
var iPage = 1;
var b = true;

//初始化數(shù)據(jù)處理
getList();

function getList() {
ajax('get','getPics.php','cpage=' + iPage,function(data) {

var data = JSON.parse(data);

if ( !data.length ) {
//后續(xù)沒有數(shù)據(jù)了
return ;
}

for ( var i=0; i<data.length; i++ ) {

//獲取高度最短的li
var _index = getShort();

var oDiv = document.createElement('div');
var oImg = document.createElement('img');
oImg.src = data[i].preview;
oImg.style.width = '225px';
oImg.style.height = data[i].height * ( 225 / data[i].width ) + 'px';
oDiv.appendChild( oImg );
var oP = document.createElement('p');
oP.innerHTML = data[i].title;
oDiv.appendChild( oP );

aLi[_index].appendChild( oDiv );

}

b = true;

});
}

window.onscroll = function() {

var _index = getShort();
var oLi = aLi[_index];

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

if ( getTop( oLi ) + oLi.offsetHeight < document.documentElement.clientHeight + scrollTop ) {

if ( b ) {
b = false;
iPage++;
getList();
}

}

function getShort() {
var index = 0;
var ih = aLi[index].offsetHeight;
for (var i=1; i<iLen; i++) {
if ( aLi[i].offsetHeight < ih ) {
index = i;
ih = aLi[i].offsetHeight;
}
}
return index;
}

function getTop(obj) {
var iTop = 0;
while(obj) {
iTop += obj.offsetTop;//問(wèn)題：offsetParent是自身和祖先節(jié)點(diǎn)都需要定位的額，但是著段代碼布局中都沒有定位存在過(guò)怎么可以使用？
obj = obj.offsetParent;
}
return iTop;
}

}
</script>
</head>

 <li></li>
   <li></li>
    <li></li>
    <li></li>
</ul>

</body>
</html>

回答

編輯回答

淡墨

offsetParent 不一定是定位元素,如果沒有定位是根元素或是table tale-cell 元素
offsetParent 的父元素,沒有需要定位的說(shuō)明

2017年7月16日 23:10

編輯回答

愚念

offsetParent幾種情況
【1】元素自身有fixed定位，offsetParent的結(jié)果為null
【2】元素自身無(wú)fixed定位，且父級(jí)元素都未經(jīng)過(guò)定位，offsetParent的結(jié)果為<body>
【3】元素自身無(wú)fixed定位，且父級(jí)元素存在經(jīng)過(guò)定位的元素，offsetParent的結(jié)果為離自身元素最近的經(jīng)過(guò)定位的父級(jí)元素

這是一個(gè)規(guī)則
你就按我說(shuō)的記憶就OK

2018年5月24日 18:28