如何用JavaScript实现瀑布流触底动态加载长尾关键词数据？

本文共计541个文字，预计阅读时间需要3分钟。

原文示例为：本文字例为大家分享了js实现瀑布流动态加载数据的具体代码，供大家参考，具体内容如下：

改写后为：

// 滚动事件处理 div.box ref=box @mousewheel=onScrollEvent // 方块内内容

本文实例为大家分享了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 > {{ item.name }}:</span> <span >{{ 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++ } },

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。