AngularGrid库在某些特殊情况下会产生空白空间

Question

我正在使用Angular网格在我的页面上实现类似Pintrest的流体布局。它一般工作正常，但在特殊情况下，它会在我的页面上产生一个空的空间。看来item7的位置没有正确计算 我在here使用AngularGrid 我的代码与他们在documentation中推荐的代码非常相似，只是我没有使用图像而是在ng-repeat中使用自定义组件。 所以它看起来像这样：

angular.module('app').controller('demo', demo);

function demo($rootScope, $scope, apiService, angularGridInstance) {
    var self=this;
    this.noOfProjects=8;
    this.firstNo=0;

    this.loadedProjects;
    this.totalProjects;

    apiService.searchProjects($rootScope.userId, self.noOfProjects, self.firstNo).then(function(response) {
            console.log(response.data);
            self.loadedProjects = response.data.matches;
            self.totalProjects  = response.data.header.totalCount;

            console.log(self.loadedProjects);
            $scope.pics=self.loadedProjects;
        });
    
}

.dynamic-grid{
            position: relative;
        }
.angular-grid > *{
	opacity: 1;
}
        .dynamic-grid.angular-grid{
            display: block;
        }

        .grid {
            position: absolute;
            list-style: none;
            background: #ffffff;
            box-sizing: border-box;
            -moz-box-sizing : border-box;
            overflow: hidden;
        }
        .grid-img {
            width: 100%;
            vertical-align: middle;

            background-color: #fff;
            
        }

        .grid-img.img-loaded{
            visibility: visible;
            opacity: 1;
        }

<div class="" data-ng-controller="demo">
		    <ul class="dynamic-grid" angular-grid="pics" grid-width="300" gutter-size="10" angular-grid-id="gallery" refresh-on-img-load="false" >
		        <li data-ng-repeat="project in pics" class="grid" data-ng-clock>
		            <project-info-min-grid project="project" class="grid-img" ></project-info-min-grid>
		        </li>
		    </ul>
		</div>

任何人都可以帮忙解决这个问题吗？

Answer 1

确定。一些研究表明，这个css实际上是关于每个项目内容的某些部分：

    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

相反，我现在正在缩短javascript中的字符串，如下所示：

var maxLength=100;
            if(self.project.description){
                if(self.project.description.length > maxLength) {
                    self.project.description = self.project.description.substring(0,maxLength-1)+"...";
                }
            }

一切正常。以防其他人遇到这个问题...