js實(shí)現(xiàn)瀑布流觸底動態(tài)加載數(shù)據(jù)
更新時(shí)間:2021年09月16日 08:34:40 作者:Cupid510
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)瀑布流觸底動態(tài)加載數(shù)據(jù),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)瀑布流觸底動態(tài)加載數(shù)據(jù)的具體代碼,供大家參考,具體內(nèi)容如下
// onScrollEvent 滾動條事件 <div class="box" ref="box" @mousewheel="onScrollEvent"> //每一個(gè)方塊內(nèi)的內(nèi)容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> //每一個(gè)方塊內(nèi)的內(nèi)容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 { // 找到數(shù)組中最小高度 和 它的索引 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'; // 修改最小列的高度 // 最小列的高度 = 當(dāng)前自己的高度 + 拼接過來的高度 arr[index] = arr[index] + nodes[i].offsetHeight + 30;//設(shè)置30的距離 } } }, 1000) },
動態(tài)加載數(shù)據(jù)
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++ } },
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
用javascript實(shí)現(xiàn)的支持lrc歌詞的播放器
用javascript實(shí)現(xiàn)的支持lrc歌詞的播放器...2007-05-05第九篇Bootstrap導(dǎo)航菜單創(chuàng)建步驟詳解
這篇文章主要介紹了Bootstrap導(dǎo)航菜單創(chuàng)建步驟詳解的相關(guān)資料,非常不錯,具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06