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" @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++ } },
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)