js实现瀑布流触底动态加载数据
本文实例为大家分享了js实现瀑布流触底动态加载数据的具体代码，供大家参考，具体内容如下 // onScrollEvent 滚动条事件 <div class="box" ref="box" @mousewheel="onScrollEvent"> //每一个方块内的内容start <div class="boxItemStyle" v-for="(userTag, i) in dataSource" :key="i" ref="boxItemStyle"> <a-tag class="moreStyle" @cli
### JavaScript 实现瀑布流触底动态加载数据
#### 一、背景介绍
在现代Web开发中，瀑布流布局因其能够自适应不同屏幕尺寸且视觉效果良好而被广泛应用于各种场景，如图片展示、商品列表等。同时，在移动端或长页面应用中，触底加载（即当用户滚动到页面底部时自动加载更多内容）可以显著提升用户体验，减少用户等待时间。本文将详细介绍如何使用JavaScript来实现瀑布流布局，并结合触底加载功能。
#### 二、瀑布流布局实现
##### 1. 瀑布流布局原理
瀑布流布局的基本思路是：根据容器的宽度计算出每行能容纳的元素数量，然后将这些元素按照一定的顺序分布到每一列中。为了保证视觉上的连续性和平滑度，通常会选择高度最小的一列来放置新的元素。
##### 2. 实现步骤
- **初始化列宽**：根据容器的总宽度和设定的列数，计算每个元素的宽度。
- **布局元素**：通过循环遍历所有需要展示的元素，根据当前元素所在位置选择合适的列进行布局。
- **更新列高**：每次放置完一个元素后，都需要更新该列的高度记录。
##### 3. 示例代码
```javascript
function waterFall() {
// 减去边距的宽度
var pageWidth = this.$refs.box.offsetWidth - 200;
var columns = 4; // 定义一行4列
var itemWidth = parseInt(pageWidth / columns);
var arr = [];
var nodes = document.getElementsByClassName("boxItemStyle");
setTimeout(() => {
for (var i = 0; i < nodes.length; i++) {
nodes[i].style.width = itemWidth + "px";
if (i < columns) {
nodes[i].style.width = itemWidth + "px";
nodes[i].style.left = itemWidth * i + i * 50 + "px";
nodes[i].style.top = 0;
arr.push(nodes[i].offsetHeight);
} else {
// 找到数组中最小高度和它的索引
var minHeight = arr[0];
var index = 0;
for (var j = 0; j < arr.length; j++) {
if (minHeight > arr[j]) {
minHeight = arr[j];
index = j;
}
}
nodes[i].style.top = arr[index] + 30 + "px";
nodes[i].style.left = nodes[index].offsetLeft + 'px';
// 修改最小列的高度
arr[index] = arr[index] + nodes[i].offsetHeight + 30; // 设置30的距离
}
}
}, 1000);
}
```
#### 三、触底加载数据
##### 1. 触底检测原理
触底加载的关键在于如何准确判断用户是否已经滚动到了页面底部。通常的做法是监听滚动事件，通过比较滚动条的位置与页面的实际高度来判断。
##### 2. 实现步骤
- **监听滚动事件**：使用`@mousewheel="onScrollEvent"`为容器绑定滚动事件处理函数。
- **计算距离底部的距离**：通过比较滚动条当前位置与页面总高度之间的差距来确定是否触底。
- **加载数据**：一旦检测到触底，就触发数据加载逻辑。
##### 3. 示例代码
```javascript
function onScrollEvent() {
if (
this.isScroll &&
this.$refs.box.scrollHeight - this.$refs.box.scrollTop - this.$refs.box.clientHeight <= 0
) {
this.loading = true;
if (this.ipagination.current == 1) {
this.ipagination.current += 1;
}
let param = {};
param['pageNo'] = this.ipagination.current;
param['pageSize'] = this.ipagination.pageSize;
param['portraitId'] = this.portraitId;
postAction(this.url.list, { param }).then((res) => {
this.loading = false;
if (res.success) {
this.isScroll = res.records;
this.dataSource = this.dataSource.concat(res.result.records || res.result);
this.waterFall();
}
});
this.ipagination.current++;
}
}
```
#### 四、总结
本文通过具体的示例代码详细介绍了如何使用JavaScript实现瀑布流布局以及触底加载数据的功能。瀑布流布局使得页面在展示大量内容时更加美观、自然；而触底加载则极大地提升了用户体验，避免了用户手动点击加载按钮的繁琐操作。这两种技术的结合使用，可以显著提高Web应用程序的性能和用户体验。希望本文对您的学习和工作有所帮助。
