0

I am using Angular grid to achieve a Pintrest-like fluid layout of items on my page. It works fine in general but in soem special cases it produces an empty space on my page. It seems the position of item7 is not calculated correctly mockup of what is happening ins ome cases I am using AngularGrid from here My code is quite similar to what they recommend in their documentation except that I am not using an image but a custom component inside the ng-repeat. so it looks like this:

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>

Can anyone help with this problem?

4

1 回答 1

0

好的。一些研究表明，这实际上是由这个 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)+"...";
                }
            }

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

于 2016-10-19T13:09:51.310 回答