本文小編為大家詳細介紹“js如何實現動態加載數據瀑布流”，內容詳細，步驟清晰，細節處理妥當，希望這篇“js如何實現動態加載數據瀑布流”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
實現的功能
1.每次下拉到底部會自動加載下一頁的數據
2.圖片逐漸顯示
首先html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#wapper {
width: 1200px;
margin: 0 auto;
position: relative;
}
.wr_item {
position: absolute;
overflow: hidden;
}
img {
display: block;
width: 100%;
opacity: 0;
transition: opacity 3s;
}
</style>
</head>
<body>
<div id="wapper"></div>
<script src="./scroll.js"></script>
<script src="./data.js"></script>
<script src="./warpper.js"></script>
<script type="text/javascript">
new Wapper({
el: "wapper",
el_itemClassName: "wr_item",
colum: 8,
gap: 10,
}).init();
</script>
</body>
</html>接著是主要的js
;
(function (doc) {
// console.log('list', list);
var Wapper = function (op) {
this.el = doc.getElementById(op.el)
this.el_itemClassName = op.el_itemClassName
this.colum = op.colum
this.gap = op.gap
// 1.首先獲取到每個照片外層盒子 也就是wr_item 的寬度
this.wr_item_w = (this.el.offsetWidth - (this.colum - 1) * this.gap) / this.colum
this.pageNum = 0
this.hightArr = []
this.pageSize = 4
}
Wapper.prototype = {
init() {
this.bindEvetn()
this.getData()
},
getData() {
// 這里默認一次獲取30個照片 ，我這里了是假數據所以就不做別的了
// 一般這里是向后端請求數據
// list一共是有120
const partList = getPartList(this.pageNum)
if (partList) {
this.render(partList)
return true
} else {
return false
}
},
render(partList) {
// 只有數據存在才進行下面的操作
if (partList) {
partList.forEach((li, index) => {
const o_item = document.createElement('div')
// 這里要給o_item設置高度
// 不要想著用img撐開，這樣做會導致不能夠獲取到o_item的offsetWidth
// 注意dom添加一個節點后，你是不能馬上獲取到其一些寬高的，
// 所以后端在返回數據的時候要給出高度
const imgW = li.width
const imgH = li.height
o_item.style.width = this.wr_item_w + 'px'
// 高度等于 盒子寬度x圖片高度/圖片寬度
const oitemH = (this.wr_item_w * imgH) / imgW
o_item.style.height = oitemH + 'px'
o_item.className = this.el_itemClassName
const img = new Image()
img.src = li.thumbURL
// 注意這里好像不能直接設置透明度，最好加個定時器觸發重繪
// img.style.opacity = '1'
o_item.appendChild(img)
this.el.appendChild(o_item)
// 設置第一行
// 必須是第一頁的數據
if (index < this.colum && this.pageNum === 0) {
this.hightArr.push(o_item.offsetHeight)
o_item.style.top = '0'
if (index + 1 % this.colum === 0) {
// 說明這是第一個
o_item.style.left = '0'
} else {
o_item.style.left = index * (this.wr_item_w + this.gap) + 'px'
}
} else {
const items = this.el.getElementsByClassName(this.el_itemClassName)
const minIndex = getMinIdx(this.hightArr)
const c_item = items[minIndex]
o_item.style.left = c_item.offsetLeft + 'px'
o_item.style.top = this.hightArr[minIndex] + this.gap + 'px'
this.hightArr[minIndex] += (o_item.offsetHeight + this.gap)
}
img.style.opacity = '1'
})
console.log('this.hightArr', this.hightArr);
this.el.style.height = this.hightArr[getMaxIdx(this.hightArr)] + 'px'
}
},
bindEvetn() {
var that = this
window.onscroll = function () {
if (getWindowHeight() + getScrollTop() === getHtmlScrollHeight()) {
console.log(that.pageNum);
that.pageNum++;
let hasNext = that.getData()
hasNext || that.pageNum--
}
}
}
}
function getPartList(pageNum) {
switch (pageNum) {
case 0:
return list.slice(0, 30)
break;
case 1:
return list.slice(30, 60)
case 2:
return list.slice(60, 90)
case 3:
return list.slice(90, 120)
default:
return null
}
}
// 找最小下標
function getMinIdx(arr) {
const minHeight = Math.min.apply(null, arr)
return [].indexOf.call(arr, minHeight)
}
// 找最大
function getMaxIdx(arr) {
const maxHeight = Math.max.apply(null, arr)
return [].indexOf.call(arr, maxHeight)
}
window.Wapper = Wapper
})(document)getWindowHeight() + getScrollTop() 是來檢測瀏覽是不是滾動到底部的。
1.這里要注意幾點 就是 后端給的數據 除了img的地址 還要給出每個img的寬高
2.在設置過渡 也就是我這里面的opacity:1的時候 要么在這之前觸發回流操作 比如我這里有獲取offsetHeight ，要么用一個定時器包括，否則這個過渡是不會生效的，圖片會直接顯示
3.后端每次返回的數據最好夠多，否則會導致可能第一頁數據不夠多，導致沒有出現滾動條 觸發不了事件，當然最好是能自己寫邏輯判斷，后面有時間會完善這個代碼，比如請求的選項也寫到op里面，讓用戶手動傳入。
讀到這里，這篇“js如何實現動態加載數據瀑布流”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
