angularjs 瀑布流

场景：当要展示的数据较多又不想做分页展示时，页面先加载出一部分（页）数据，滚动条滚动到底部，数据（图片或者表格）继续加载一部分（页）。
好处：避免一次加载出大量数据时加载时间过长。
原理：监听滚动条，当滚动到下部时，即调用某函数，该函数向后台请求一部分数据，并push到要展示的数组中。
实例：下面是我的实例，是将大量数据用长表格呈现（需求就是这样）：
$scope.gridOptions_yzj.data是存放取回来的数据，即表格要repeat的数组，里面有五个字段要双向绑定，html代码就不贴了。
下面贴js代码：

var page=1,     //读取的页数
    loading=false;   //判断是否正在读取内容的变量
     function pushdata() {     //向gridOptions_yzj.data添加数据的函数
         if(!loading){          //如果页面没有正在读取
             loading=true;      //告知正在读取
             $http({            //调用API并传参，读取第几页的内容
                 method:"POST",
                 url:"/ted/home/object.do",
                 params:{'page':page},
             }).success(function (data) {
                 $scope.yzjNum=data.totalCount   //总条数，根据需求这个可以不要
                 for(var i=0;i<data.hosts.length-1;i++){
                     if(data.hosts[i].cpu!=="无"){ //给某列数据添加百分号，根据需求可以不要      
                       data.hosts[i].cpu=parseFloat(data.hosts[i].cpu).toFixed(2)+"%"
                     }
                     if(data.hosts[i].memory!=="无"){
                         data.hosts[i].memory=parseFloat(data.hosts[i].memory).toFixed(2)+"%"
                     }
                     $scope.gridOptions_yzj.data.push(data.hosts[i])  //向gridOptions_yzj.data中push新的数据
                 }
                 loading=false;     //告知读取结束
                 $scope.gridheight=($scope.gridOptions_yzj.data.length+1.2) *30;
             });
             page++                   //翻页
         }
     }
     $('.wrap-right').scroll(function () {     //jquery，事件滚动监听
         if($('.wrap-right').scrollTop()+$('.wrap-right').height()> $scope.gridheight+200){ //我的滚动条在.wrap-right这个div里，gridheight是表格高度
             pushdata();   //滚到底部时调用pushdata函数
         }
     });
     pushdata();  //得先调用一次，添加第一部分内容

1，关于滚动条监听，scroll()是jq的一个方法，一般情况下可参照：

$(window).on('scroll', function (event) { //jquery，事件滚动监听
  if ($(document).scrollTop() + $(window).height() >= $(document).height()) { //当滚动到页面底部 
  pushContent(); //调用向$scope.posts添加内容函数 
  } 
});

由于我的滚动条在.wrap-right这个div里，并没有在body里，而且是根据我页面的实际情况写的。
2，瀑布流加载图片，应该也可以参考这个思路，但如果有这个需求：图片高度不一，新加载的图片要插入到列表中高度最小的那列。则要再进一步思考
3，推荐下瀑布流排版 Masonry和AngularJS 无限滚动加载数据控件 ngInfiniteScroll，虽然我还没用过。。
ps:项目上最高权限的账户的首页有四千多条数据要展示，原来是一下子加载出来，能卡7,8 秒，现在丝一般的顺滑~