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裡面，讓用戶手動傳入
主要是大傢理解這思路就好。
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。