js动态加载数据瀑布流

最新推荐文章于 2023-04-23 16:05:52 发布

沁染流年

最新推荐文章于 2023-04-23 16:05:52 发布

阅读量590

点赞数 1

分类专栏： JavaScript 前端文章标签： js css javascript 前端

本文链接：https://blog.csdn.net/weixin_49210760/article/details/124052784

版权

前端同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

JavaScript

17 篇文章 0 订阅

订阅专栏

实现的功能
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里面，让用户手动传入

主要是大家理解这思路就好。我也是写给自己看的

沁染流年

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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>
复制链接

扫一扫