原生JS实现无限滚动瀑布流布局

太过爱你忘了你带给我的痛 2022-02-27 12:52 363阅读 0赞

### API ###

**HTMLElement.offsetWidth** 是一个只读属性，返回一个元素的布局宽度。一个典型的（译者注：各浏览器的offsetWidth可能有所不同）offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(width)的值。  
**Element.clientWidth** 属性表示元素的内部宽度，以像素计。该属性包括内边距，但不包括垂直滚动条（如果有）、边框和外边距。  
**创建节点的三种方式**

document.write()
    document.createElement()
    element.innerHTML = ''

**Element.scrollTop** 一个元素的 scrollTop 值是这个元素的顶部到视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。  
**onscroll** 元素的 scroll 事件处理函数;元素的 scroll 事件处理函数。

### html结构 ###

* { 
                padding: 0;
                margin: 0;
            }
            .box{ 
                margin: 0 auto;
                position: relative;
            }
            .box > div{ 
                float: left;
            }
            img { 
                margin: 10px;
                padding: 10px;
                border: 1px solid black;
                border-radius: 10px;
                box-shadow: 0 0 10px orange;
            }

### 模拟的数据实现瀑布流布局 ###

当然，瀑布流布局不是说做一个水流的界面…瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。  
我们准备的图片宽度最好一致，否则需要在css进行设置统一的宽度，因为是瀑布流布局，所以高度是自动的。

##### 将图片放到box容器 #####

1.  获取

let box = document.querySelector('.box')

1.  我们准备好的图片，放入json字符串里面，并将其转为可操作的数组

var dataStr = '{"src":["i1.jpg","i2.jpg","i3.jpg","i4.jpg","i5.jpg","i6.jpg","i7.jpg","i8.jpg","i9.jpg","i10.jpg","i11.jpg","i12.jpg","i13.jpg","i14.jpg","i15.jpg"]}'
    let dataArr = JSON.parse(dataStr).src

1.  将图片添加到页面

dataArr.forEach((item,i)=>{ 
                //给每个容器创建一个父容器存放图片(根据我们的样式浮动元素，这里为div)
                let imgBox = document.createElement('div')
                //img是我自己的文件夹名
                imgBox.innerHTML = `<img src="img/${ item}" alt="${ i}">`
                box.appendChild(imgBox)
        })

### 通过定位对图片进行排版 ###

1.  先求出屏幕的宽度和图片容器的宽度，算出屏幕最大能放多少张图片（要确保图片能够加载完毕，即dom加载完毕，所以要使用onload，否则获取不到图片宽度和高度）

let allImgBox = box.children
            let screenW = document.documentElement.clientWidth || document.body.clientWidth //屏幕的宽度
            let imgBoxW = allImgBox[0].offsetWidth//每一张图片的宽度（图片是一致的）
            let num = parseInt(screenW/imgBoxW) //每一行最多能放多少张图片

1.  最后求出box的宽度，使得box居中显示

box.style.width = imgBoxW * num + 'px'

1.  每一行最多能放下num张图片，将第一行的图片的高度存入数组，长度肯定为num

let heightArr = [] //用来存放高度
            for(var i=0;i<num;i++){ 
                heightArr.push(allImgBox[i].offsetHeight)
            }

1.  我们下一张图片则需要在高度最小的图片下面进行定位放置

for(var i=0;i<num;i++){ 
                heightArr.push(allImgBox[i].offsetHeight)
            }
            let imgMin = Math.min.apply(null,heightArr) //求出图片高度最小值
            let imgIndex = heightArr.indexOf(imgMin) //根据最小值求出该索引值
            // 2.根据索引值进行定位
            allImgBox[num].style.position = 'absolute'
            allImgBox[num].style.top = imgMin + 'px'
            allImgBox[num].style.left = imgBoxW + 'px'

1.  根据第四步（上一步）的思路，放置多张图片则可以将其改造为

for(var i=num;i<allImgBox.length;i++){ 
                let imgMin = Math.min.apply(null,heightArr) //求出图片高度最小值
                let imgIndex = heightArr.indexOf(imgMin) //根据最小值求出该索引值
                allImgBox[i].style.position = 'absolute'
                allImgBox[i].style.top = imgMin + 'px'
                allImgBox[i].style.left = imgBoxW*imgIndex + 'px'
                heightArr[imgIndex] = imgMin + allImgBox[i].offsetHeight
            }

##### 封装上面代码来重用，提高代码的可读性 #####

### 实现无限滚动 ###

1.  获取界面的高度

let screenY = document.documentElement.clientHeight || document.body.clientHeight

1.  获取滚动的高度

let pageTop = document.documentElement.scrollTop || document.body.scrollTop

1.  这里通过每次滚动被屏幕卷去界面的高度大于屏幕界面的高度来实现无限滚动（这是因为我们box的高度足够高，如果其它情况需要根据box的高度处理，比如box-界面高度与滚动高度做比较），比较简单处理

window.onload = function(){ 
            cascade(box)
            window.onscroll = function(){ 
                let screenY = document.documentElement.clientHeight || document.body.clientHeight
                let pageTop = document.documentElement.scrollTop || document.body.scrollTop
                if(pageTop>screenY){ 
                    let newArr = dataArr.concat(dataArr)//模拟数据
                    addImg(box,newArr)
                    cascade(box)
                }
            }
        }

### 使用真实接口(豆瓣) ###

1.  豆瓣接口（豆瓣接口有访问限制）

https://api.douban.com/v2/movie/top250
    https://api.douban.com/v2/movie/top250?start=0&count=10

1.  我们这里使用原生JS封装jsonp,当然自己可以使用jquery ajax、axios、fetch都可以
2.  我们需要对豆瓣接口的图片进行处理
3.  当然。其它与上面基本一致