微信小程序上线前_JavaScript完成无量滚动加载数据

2021-01-12

JavaScript实现无穷滚动加载数据       这篇文章主要为大家详细介绍了JavaScript实现无穷滚动加载数据,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

我们以瀑布流的布局来实现无穷加载。瀑布流就是一些等宽不等高的数据块布局。在滚动条下拉时,它会进行加载。那么问题就是在判断什么时候应该加载。

我们首先应该明白瀑布流布局的特点。它将下一个图片总是放在当前列数最低的那一列。所以当加载最后一个蓝色的图片时,也就无疑是最后一个图片了。所以要判断该图片加载到什么程度来触发滚动事件。
图上灰色的表示页面的大小,后面蓝色边框表示窗口的大小。当拖动滚动条时,灰色部分上移。我们希望页面最后一个图片(蓝色图片)加载一半时触发滚动事件。那么就要形成参照。

下来写代码:

//检测是否具备滚动条加载数据块的条件
function checkScrollSlide(){
 var oparent = document.getElementById('main');
 var oBoxs = getByClass(oparent,'box');
 var scrollH = document.body.scrollTop || document.documentElement.scrollTop + document.body.clientHeight || document.documentElement.clientHeight;
 var lastBoxH = oBoxs[oBoxs.length - 1].offsetTop + Math.floor(oBoxs[oBoxs.length - 1].offsetHeight/2);
 return (lastBoxH scrollH ) true : false;

getClass是根据类名查找元素集合的自己写的函数,待会儿会附上源码

我们要进行加载的数据块的格式是这样的.每个图片被一个 >

 div id = "main" 
 div class = "box" 
 div class = "pic" 
 img src = "images/0.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/1.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/2.jpg" 
 /div 
 /div 
 div 

首先我们要加载的数据块应该是从后台传过来的,在这里我们用json模拟一下就可以:

var DataIn = {"data":[{"src":'0.jpg'},{"src":'1.jpg'},{"src":'2.jpg'},{"src":'3.jpg'},{"src":'4.jpg'},{"src":'5.jpg'}]};

比如这个就是后台传过来的数据。

上面的函数返回一个布尔值,当为true时,触发滚动事件。

 window.onscroll = function(){
 var oparent = document.getElementById('main');
 //当满足加载条件时,就要向页面中加载数据块
 if(checkScrollSlide){
 for(var i = 0; i DataIn.data.length; i++){
 var oBox = document.createElement('div');
 oBox.className = 'box';
 oparent.appendChild(oBox);
 var opic = document.createElement('div');
 opic.className = 'pic';
 oBox.appendChild(opic);
 var oImg = document.createElement('img');
 oImg.src = './images/'+DataIn.data[i].src;
 opic.appendChild(oImg);
 waterFull('main','box');

附上源码:

css和html

 !DOCTYPE html 
 html 
 head 
 meta charset = "utf-8" / 
 script src = "./jswaterfll.js" /script 
 title 瀑布流布局 /title 
 style type="text/css" 
 padding: 0px;
 margin: 0px;
 #main{
 position: relative;
 .box{
/* display: inline-block;*/
 padding: 15px 0px 0px 15px;
 float: left;
 .pic{
 padding: 10px;
 border-radius: 5px;
 border:1px solid #ccc;
 box-shadow: 0 0 5px #ccc;
 .pic img{
 width: 165px;
 height: auto;
 /style 
 /head 
 body 
 div id = 'main' 
 div class = "box" 
 div class = "pic" 
 img src = "images/3.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/4.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/20.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/21.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/2.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/3.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/4.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/5.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/6.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/7.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/8.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/9.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/10.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/11.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/17.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/18.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/19.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/4.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/5.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/6.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/7.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/8.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/11.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/12.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/13.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/14.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/15.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/16.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/17.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/18.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/19.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/20.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/21.jpg" 
 /div 
 /div 
 /div 
 /body 
 /html 

js代码:

window.onload = function(){
 waterFull('main','box');
 var DataIn = {"data":[{"src":'0.jpg'},{"src":'1.jpg'},{"src":'2.jpg'},{"src":'3.jpg'},{"src":'4.jpg'},{"src":'5.jpg'}]};
 window.onscroll = function(){
 var oparent = document.getElementById('main');
 if(checkScrollSlide){
 for(var i = 0; i DataIn.data.length; i++){
 var oBox = document.createElement('div');
 oBox.className = 'box';
 oparent.appendChild(oBox);
 var opic = document.createElement('div');
 opic.className = 'pic';
 oBox.appendChild(opic);
 var oImg = document.createElement('img');
 oImg.src = './images/'+DataIn.data[i].src;
 opic.appendChild(oImg);
 waterFull('main','box');
function waterFull(parent,children){
 var oParent = document.getElementById(parent);
 //var oBoxs = parent.querySelectorAll(".box");
 var oBoxs = getByClass(oParent,children);
 //计算整个页面显示的列数
 var oBoxW = oBoxs[0].offsetWidth;
 var cols = Math.floor(document.documentElement.clientWidth/oBoxW);
 //设置main的宽度,并且居中
 oParent.style.cssText = 'width:'+oBoxW * cols +'px; margin: 0 auto';
 //找出高度最小的图片,将下一个图片放在下面
 //定义一个数组,存放每一列的高度,初始化存的是第一行的所有列的高度
 var arrH = [];
 for(var i = 0; i oBoxs.length ; i++){
 if(i cols){
 arrH.push(oBoxs[i].offsetHeight);
 else{
 var minH = Math.min.apply(null,arrH);
 var minIndex = getMinhIndex(arrH,minH);
 oBoxs[i].style.position = 'absolute';
 oBoxs[i].style.top= minH + 'px';
 //oBoxs[i].style.left = minIndex * oBoxW + 'px'; 
 oBoxs[i].style.left = oBoxs[minIndex].offsetLeft+'px';
 arrH[minIndex] += oBoxs[i].offsetHeight; 

var oBoxs = getByClass(oparent,'box'); var scrollH = document.body.scrollTop || document.documentElement.scrollTop + document.body.clientHeight || document.documentElement.clientHeight; var lastBoxH = oBoxs[oBoxs.length - 1].offsetTop + Math.floor(oBoxs[oBoxs.length - 1].offsetHeight/2); return (lastBoxH scrollH ) true : false;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




扫描二维码分享到微信

在线咨询
联系电话

400-888-8866