目录
一、情况描述:
其实在网页的布局中我们时常会使用到以下这样的排版方式
(文本一 => 图片一 => 文本二 => 图片二 ...)
这样就会浮现一个问题,如果网页大小一直是不变,也就是说不改变当前网页宽高的情况下,这样的布局是没有问题的,可是,一旦对网页进行缩放的话,因为当前 文本 和 图片的距离是固定的,所以就会出现错位和相距过大或过小的情况
那么在这种情况下,我们就应该去动态的去计算当前两个文本之间的距离,然后根据计算好的距离去将图片放置在一个合适的位置。
二、上代码:
const translatep = ref("110px");
const arr_text = reactive(['我是第一', '我是第二', '我是第三', '我是第四']);
let end = 0;
let start = 0;
const translateData = (divF: any) => {
divF.forEach((item: any, index: number) => {
if (index === 0 || index === 1) {
if (index === 1) end = item.getBoundingClientRect().x
if (index === 0) start = item.getBoundingClientRect().x
}
})
translatep.value = (end - start - 50) / 2 + 50 - 12.8 + 'px'
console.log((end - start - 50) / 2 + 50 - 12.8 + 'px')
}
onMounted(() => {
let divF = document.querySelectorAll(".span-flex .trend-point-wrap-item");
translateData(divF)
let deRest = debounce(() => translateData(divF))
window.addEventListener("resize", () => {
translateData(divF)
})
})
三、分析:
-
item.getBoundingClientRect().x 返回元素的大小及其相对于视口的位置。
-
(end - start - 50) / 2 + 50 - 12.8 + 'px'
end:文本二视口左上角x坐标
start:文本一视口左上角x坐标
50:文本的宽度(一般都是一样的)
/2:两个文本中间的位置
12.8:文本宽度的一半(我这里文本宽为25.6px)
四、问题 :
虽然上述代码确实可以做到动态计算这个功能,但是就目前而言,还是有两点问题:
- 如果频繁的去改变网页的宽度,那么就会一直进行计算,浪费资源
- 因为使用的是 window.addEventListener("resize",() => {}),在监听窗口变化时,固然起到很好的效果,但是对于网页性能消耗过大。因为
html
中每个标签的变化,都会触发当前监听事件。
五、优化:
问题一:可以使用防抖函数去处理解决。
//防抖
const debounce = <T>(fn: (...args: any[]) => T, delay = 500) => {
let timer: number | null = null;
let result: T | null = null;
return (...args: any[]) => {
if (timer) {
clearTimeout(timer);
timer = null;
}
timer = window.setTimeout(() => {
result = fn(...args);
}, delay);
return result;
};
}
let deRest = debounce(() => translateData(divF))
deRest()
问题二:需要使用到 ResizeObserver (对指定element和svgelement元素进行监听)
let element: any = document.querySelector('.span-flex')
var ro = new ResizeObserver(entries => {
for (let _entry of entries) {
deRest()
}
});
// 观察一个或多个元素
ro.observe(element);
})