获取的结果顺序显示不允许的空白

Question

我的订单结果有问题。您可以看到问题here。

列表没问题，结果显示按小时排序。但问题在于最终结果，这是一个麻烦的空白区域。

这是我的结果html的代码：

<h2>PRONOSTICS DU JOUR</h2>
<div class="row mediaItemCtr" ng-repeat="mi in mediaItems">
    <media-item></media-item>
</div>

这是获得结果的代码：

$searchQuery = "SELECT *,(
        SELECT `display_name` FROM users WHERE id=m.uid
    ) as `display_name`,(
        SELECT `username` FROM users WHERE id=m.uid
    ) as `username`, (
        SELECT COUNT(*) FROM media_likes WHERE mid=m.id AND sid = :sid
    ) as `isPurple` FROM media m WHERE status='1' ORDER BY `hour` ASC
        LIMIT " . $offset . ", " . $settings['display_count'];`

和js：

rocketeerApp.controller("homeController", ["$scope", "$http", "$timeout", function($scope, $http, $timeout){
    $scope.mediaItems           =   [];
    $scope.search               =   {
        offset: 0
    };

    $scope.slides               =   slides;
    $scope.isGrabbing           =   false;
    $scope.stopGrabbing         =   false;

    $scope.getMediaItems        =   function(){
        if($scope.isGrabbing || $scope.stopGrabbing){
            return null;
        }
        $scope.isGrabbing       =   true;
        $http({
            method: 'POST',
            url: 'actions/get-home-media-items.php',
            data: $scope.search
        }).success(function(data,status,headers,config){
            data.items.forEach(function(ele,ind,arr){
                $scope.mediaItems.push(ele);
            });
            $scope.search.offset    =   $scope.mediaItems.length;
            $scope.isGrabbing   =   false;

            if(data.items.length === 0){
                $scope.stopGrabbing =   true;
            }
        });
    };

    $scope.getMediaItems();

    $( document).scroll(function() {
        var checkPoint  =   $(document).height() - 1000;

        if($(document).scrollTop() > checkPoint ){
            $scope.getMediaItems();
        }
    });
}]);