JavaScript实现无穷滚动加载数据

分类：计算机教程

<div class="analysisContainer" ng-show="showData" when-scroll-end="LoadingData()">
<div id="b" ng-show="isLoadingPIG" style="width: 100%; text-align: center; z-index: 1">
<h6 class="loading">
<img src="~/Content/Images/loading2.gif" />
Loading Win & Convert data...
</h6>
</div>
<div id="a" ng-show="!isLoadingPIG">
<img src="~/2016-03-16_152323.png" />
</div>
<div ng-show="!isLoadingUJ">
<img src="~/2016-03-16_153347.png" />
</div>
<div ng-show="!isLoadingBoxSummary">
<img src="~/2016-03-16_153404.png" />
</div>
</div>

无穷滚动就是滑动滚动条，实现数据块的无穷加载。

app.controller('AnalysizerCtrl', ['$scope', '$timeout', '$window',
function ($scope, $timeout, $window) {
$scope.showData = false;
$scope.isLoadingPIG = false;
$scope.isLoadingUJ = false;
$scope.isLoadingBoxSummary = false;
$scope.LoadingData = function (index) {
$scope.showData = true;
var pigHeight = $(".analysisContainer")[1].children[1].scrollHeight;
var ujHeight = $(".analysisContainer")[1].children[2].scrollHeight;
var boxSummaryHeight = $(".analysisContainer")[1].children[3].scrollHeight;
if (index == 0) {
//$scope.reLoadData = true;
pigHeight = 0;
ujHeight = 0;
$scope.gridOptions.data = null;
}
var showSummaryBox = function () {
$scope.isLoadingBoxSummary = false;
}
var showUj = function () {
$scope.isLoadingUJ = false;
//$scope.isLoadingSummaryBox = true;
//$timeout(showSummaryBox, 1000);
}
var showPig = function () {
$scope.isLoadingPIG = false;
//$scope.isLoadingUJ = false;
//$timeout(showUj, 10000);
}
if (pigHeight == 0) {
$scope.isLoadingPIG = true;
$timeout(showPig, 1000);
} else if (ujHeight == 0) {
$scope.isLoadingUJ = true;
$timeout(showUj, 1000);
} else if (boxSummaryHeight == 0) {
$scope.isLoadingBoxSummary = true;
$timeout(showSummaryBox, 1000);
}
};
}]
).directive('whenScrollEnd', function () {
return function (scope, elm, attr) {
var pageWindow = $(this);
pageWindow.bind('scroll', function (et, ed, pb) {
var winScrollTop = pageWindow.scrollTop();
var winHeight = pageWindow.height();
var maxScrollHeight = $(".analysisContainer")[1].scrollHeight;
if ((winScrollTop   winHeight) > maxScrollHeight) {
scope.$apply(attr.whenScrollEnd);
}
});
}
});

附上源码：

您可能感兴趣的文章:

我们要进行加载的数据块的格式是这样的.每个图片被一个class= pic的div包裹。最后整体属于父元素main

下面是HTML部分：

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

Angularjs 滚动加载更多数据的相关知识，小编就给大家介绍这么多，希望对大家有所帮助！

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

Javascript部分的controller

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

下面的例子只是为了简单记录怎么使用angularjs来实现滚动加载数据，具体的还是需要具体看待:

下来写代码：

重要的部分是指令(directive)和滚动时要加载数据的部分。

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; 
  }
 }


}
function getByClass(parent,className){

 var boxArr = new Array();//用来获取所有class为box的元素

 oElement = parent.getElementsByTagName('*');

 for (var i = 0; i <oElement.length; i  ) {

  if(oElement[i].className == className){

   boxArr.push(oElement[i]);

  }
 };
 return boxArr;
}


//获取当前最小值得下标
function getMinhIndex(array,min){

 for(var i in array){

  if(array[i] == min)

   return i;
 }
}

//检测是否具备滚动条加载数据块的条件
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;
}

css和html

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

您可能感兴趣的文章:

本文由美洲杯赔率发布于计算机教程,转载请注明出处：JavaScript实现无穷滚动加载数据

上一篇：JavaScript时间操作之年月日星期级联操作下一篇：没有了