js實現(xiàn)動態(tài)加載數(shù)據(jù)瀑布流

更新時間：2022年07月27日 11:52:29 作者：沁染流年

這篇文章主要為大家詳細介紹了js實現(xiàn)動態(tài)加載數(shù)據(jù)瀑布流，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)動態(tài)加載數(shù)據(jù)瀑布流的具體代碼，供大家參考，具體內(nèi)容如下

實現(xiàn)的功能

1.每次下拉到底部會自動加載下一頁的數(shù)據(jù)
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個照片 ，我這里了是假數(shù)據(jù)所以就不做別的了
? ? ? // 一般這里是向后端請求數(shù)據(jù)
? ? ? // list一共是有120
? ? ? const partList = getPartList(this.pageNum)
? ? ? if (partList) {
? ? ? ? this.render(partList)
? ? ? ? return true
? ? ? } else {
? ? ? ? return false
? ? ? }

? ? },
? ? render(partList) {
? ? ? // 只有數(shù)據(jù)存在才進行下面的操作
? ? ? if (partList) {
? ? ? ? partList.forEach((li, index) => {
? ? ? ? ? const o_item = document.createElement('div')
? ? ? ? ? // 這里要給o_item設置高度
? ? ? ? ? // 不要想著用img撐開，這樣做會導致不能夠獲取到o_item的offsetWidth
? ? ? ? ? // 注意dom添加一個節(jié)點后，你是不能馬上獲取到其一些寬高的，
? ? ? ? ? // 所以后端在返回數(shù)據(jù)的時候要給出高度
? ? ? ? ? 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

? ? ? ? ? // 注意這里好像不能直接設置透明度，最好加個定時器觸發(fā)重繪
? ? ? ? ? // img.style.opacity = '1'

? ? ? ? ? o_item.appendChild(img)
? ? ? ? ? this.el.appendChild(o_item)
? ? ? ? ? // 設置第一行?
? ? ? ? ? // 必須是第一頁的數(shù)據(jù)

? ? ? ? ? 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.這里要注意幾點就是后端給的數(shù)據(jù) 除了img的地址還要給出每個img的寬高

2.在設置過渡也就是我這里面的opacity:1的時候要么在這之前觸發(fā)回流操作比如我這里有獲取offsetHeight ，要么用一個定時器包括，否則這個過渡是不會生效的，圖片會直接顯示

3.后端每次返回的數(shù)據(jù)最好夠多，否則會導致可能第一頁數(shù)據(jù)不夠多，導致沒有出現(xiàn)滾動條觸發(fā)不了事件，當然最好是能自己寫邏輯判斷，后面有時間會完善這個代碼，比如請求的選項也寫到op里面，讓用戶手動傳入

主要是大家理解這思路就好。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: