获取网页元素的位置

今天做的首页展示图的需求：

1. 首页卡片面板显示

2. 进入网页根据用户屏幕大小动态先载入占满屏幕的卡片数量

3. 拉动滚动条或者鼠标滚轮动态跳出剩余的卡片面板

初步成品如下

思路：

1. 仍然采用 Flex 布局

2. 监测卡片在可视窗口上的相对位置，卡片的顶部相对位置达到所指定位置即跳出此显示

3. DOM 操作加上类名，添加动态效果

首先先将静态界面制作出来，界面比较简单做得还是比较快的

其中根据不同行数的卡片跳进来的动画的不同，可设置

奇数行的是从左边跳出

.content:nth-of-type(odd) {
    transform: translateX(-400%);
    transition: transform 0.3s ease;
}

接下来根据元素相对位置的需求，找到以下相关资料：

MND：getBoundingClientRect

阮一峰的网络日志：用Javascript获取页面元素的位置

综上，选用 getBoundingClientRect 这个 API，实现起来方便且全面

监听 scroll 事件，调用其回调对象 checkContents

卡片到达可视区域的五分之四的位置即可触发

function checkContents() {
    const targetBottom = window.innerHeight / 5 * 4    
    contents.forEach( content => {
        const contentTop = content.getBoundingClientRect().top        

        if ( contentTop < targetBottom ) {
            content.classList.add('show')        
        } else { 
            content.classList.remove('show')}    
    }
)}

Done 🚀🚀🚀