-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathscholl3.html
183 lines (164 loc) · 5.4 KB
/
scholl3.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Variable Height Virtual List - Measure After Render</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
padding: 20px;
}
/* 可滚动容器 */
#list-container {
width: 300px;
height: 400px; /* 可视区域高度，可根据需要修改 */
border: 1px solid #ccc;
overflow-y: auto;
position: relative;
}
/* 条目样式 */
.item {
position: absolute;
width: 100%;
padding: 8px 10px;
border-bottom: 1px solid #ddd;
background-color: #fafafa;
box-sizing: border-box;
}
/* 用于撑开滚动条的占位元素 */
.spacer {
position: relative;
width: 100%;
}
</style>
</head>
<body>
<h2>渲染后立即测量并更新 - 原生JS示例</h2>
<div id="list-container"></div>
<script>
// ---------------------------
// 1. 生成模拟数据：随机内容, 制造不同高度
// ---------------------------
const TOTAL_COUNT = 500;
const data = Array.from({ length: TOTAL_COUNT }, (_, i) => {
const text = 'Message ' + i + ': ' + generateRandomWords(5 + Math.floor(Math.random() * 20));
return text;
});
function generateRandomWords(wordCount) {
const words = [];
const chars = "abcdefghijklmnopqrstuvwxyz";
for(let i = 0; i < wordCount; i++){
let len = 1+ Math.floor(Math.random() * 5);
let w = '';
for(let c = 0; c < len; c++){
w += chars[Math.floor(Math.random() * chars.length)];
}
words.push(w);
}
return words.join(' ');
}
// ---------------------------
// 2. 建立核心数据结构：itemHeights 和 itemPositions
// ---------------------------
let COUNT = 10;
// 默认先假设每条 50px，高度后面会根据实际测量更新
let itemHeights = Array(TOTAL_COUNT).fill(30);
let itemHeights2 = Array(COUNT).fill(50);
// itemPositions[i] 表示第 i 条在整个列表中的 “top偏移量”
let itemPositions = Array(TOTAL_COUNT).fill(0);
let itemPositions2 = Array(COUNT).fill(0);
// 初次计算前缀和
computePositions(0);
function computePositions(startIndex) {
itemPositions[0] = 0;
itemPositions2[0] = startIndex?(startIndex-1)*30:0;
for(let i = 1; i < TOTAL_COUNT; i++){
itemPositions[i] = itemPositions[i - 1] + itemHeights[i - 1];
}
for(let i = 1; i < COUNT; i++){
itemPositions2[i] = itemPositions2[i - 1] + itemHeights2[i - 1];
}
}
// ---------------------------
// 3. 初始化DOM：container + spacer
// ---------------------------
const container = document.getElementById('list-container');
// 用于撑开滚动条高度
const spacer = document.createElement('div');
spacer.className = 'spacer';
spacer.style.height = '2500px'; //getTotalHeight() + 'px';
container.appendChild(spacer);
// 记录当前渲染的DOM，方便后续移除
let renderedItems = [];
// ---------------------------
// 4. 渲染函数
// ---------------------------
function render() {
const scrollTop = container.scrollTop;
const viewHeight = container.clientHeight;
const viewBottom = scrollTop + viewHeight;
// 4.1 找可视区的起始索引
let startIndex = 0;
startIndex = Number.parseInt(scrollTop / 30);
let endIndex = Number.parseInt(viewBottom / 30);
// for(let i = 0; i < TOTAL_COUNT; i++){
// if(itemPositions[i] + itemHeights[i] >= scrollTop){
// startIndex = i;
// break;
// }
// }
// // 4.2 找可视区的结束索引
// let endIndex = startIndex;
// for(let i = startIndex; i < TOTAL_COUNT; i++){
// if(itemPositions[i] > viewBottom) {
// break;
// }
// endIndex = i;
// }
// 4.3 移除上一次渲染的DOM
renderedItems.forEach(el => {
if (el.parentNode) {
el.parentNode.removeChild(el);
}
});
renderedItems = [];
// 4.4 渲染 startIndex ~ endIndex 的元素
for(let i = startIndex; i <= endIndex; i++){
const itemEl = document.createElement('div');
itemEl.className = 'item';
itemEl.textContent = data[i];
// 根据前缀和得到它的绝对定位top
itemEl.style.top = itemPositions2[i] + 'px';
container.appendChild(itemEl);
renderedItems.push(itemEl);
// (A) ==== 渲染后立即测量 ====
const realHeight = itemEl.offsetHeight;
// 如果测量值与我们之前假设的高度不一致
if(realHeight !== itemHeights2[i]) {
// 更新缓存
itemHeights2[i] = realHeight;
// 重新计算位置
computePositions(startIndex);
// 更新 spacer 高度
spacer.style.height = getTotalHeight() + 'px';
// (B) ==== 重新渲染 ====
// 因为一旦高度改变，后续元素的 top 都要重算，否则会重叠或错位
// 这里直接再次调用 render()，并 return 终止当前流程
render();
return;
}
}
}
// ---------------------------
// 5. 监听滚动、初始化
// ---------------------------
container.addEventListener('scroll', render);
render(); // 首次渲染
</script>
</body>
</html>