-
墨染盛夏2020-01-01 00:00
- 31
- 0
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</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;
//初始化数据处理
getList();
function getList() {
ajax('get','getPics.php','cpage=' + iPage,function(data) {
var data = JSON.parse(data);
if ( !data.length ) {
//后续没有数据了
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;//问题：offsetParent是自身和祖先节点都需要定位的额，但是着段代码布局中都没有定位存在过怎么可以使用？
obj = obj.offsetParent;
}
return iTop;
}
}
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
</ul></body>
</html>
- 共 0 条
- 全部回答
-
有些人走著走著就散了 普通会员 1楼
offsetParent是 HTML 元素（如div、span等）的一个属性，用于指定元素的祖先节点（即直接的父节点）。在这个属性中，如果元素的祖先节点存在，则说明该元素是祖先节点的子元素。但是，如果代码中没有定义
offsetParent，那么它将默认为null。也就是说，元素本身并不需要定位，只需要知道它是由哪个祖先节点定位的。例如：
```html
Hello, world!```
在这个例子中，
div元素不需要定位，因为它本身就是根节点。但是，如果代码中定义了offsetParent，那么它将被赋予一个值，例如null，然后div元素就可以通过offsetParent属性来定位了。
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部