<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实现无穷滚动加载数据