js实现瀑布流触底动态加载数据
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了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" @click="more(userTag.primaryParam)"> 更多></a-tag>
<div v-for="item in userTag.userTag" :key="item.code">
<p>
<span style="text-align: left"> {{ item.name }}:</span>
<span style="text-align: right">{{ item.value }}</span>
</p>
</div>
</div>
//每一个方块内的内容end
</div>瀑布流布局
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(() => {
//var node1 = Array.from(nodes)
// var node2 = Array.prototype.slice.call(nodes)
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)
},动态加载数据
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++
}
},以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
