js如何實(shí)現(xiàn)動(dòng)態(tài)加載數(shù)據(jù)瀑布流

發(fā)布時(shí)間：2022-07-28 10:12:30 來源：億速云閱讀：94 作者：iii 欄目：開發(fā)技術(shù)

本文小編為大家詳細(xì)介紹“js如何實(shí)現(xiàn)動(dòng)態(tài)加載數(shù)據(jù)瀑布流”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“js如何實(shí)現(xiàn)動(dòng)態(tài)加載數(shù)據(jù)瀑布流”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

實(shí)現(xiàn)的功能

1.每次下拉到底部會(huì)自動(dòng)加載下一頁的數(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.首先獲取到每個(gè)照片外層盒子 也就是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() {
      // 這里默認(rèn)一次獲取30個(gè)照片 ，我這里了是假數(shù)據(jù)所以就不做別的了
      // 一般這里是向后端請(qǐng)求數(shù)據(jù)
      // list一共是有120
      const partList = getPartList(this.pageNum)
      if (partList) {
        this.render(partList)
        return true
      } else {
        return false
      }

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

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

          o_item.appendChild(img)
          this.el.appendChild(o_item)
          // 設(shè)置第一行 
          // 必須是第一頁的數(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) {
              // 說明這是第一個(gè)
              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
    }
  }

  // 找最小下標(biāo)
  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() 是來檢測(cè)瀏覽是不是滾動(dòng)到底部的。

1.這里要注意幾點(diǎn) 就是后端給的數(shù)據(jù) 除了img的地址還要給出每個(gè)img的寬高

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

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

讀到這里，這篇“js如何實(shí)現(xiàn)動(dòng)態(tài)加載數(shù)據(jù)瀑布流”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

js如何實(shí)現(xiàn)動(dòng)態(tài)加載數(shù)據(jù)瀑布流

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽