本文小编为大家详细介绍“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进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
