0

Angular グリッドを使用して、ページ上の項目の Pintrest のような流動的なレイアウトを実現しています。一般的には問題なく動作しますが、一部の特殊なケースでは、ページに空のスペースが作成されます。item7 の位置が正しく計算されていないよう ですここいくつかのケースで何が起こっているかのモックアップ から AngularGrid を使用しています 私のコードは、画像ではなく 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>

誰でもこの問題を解決できますか?

4

1 に答える 1

0

Ok。少し調査したところ、これは実際には、各アイテムのコンテンツの一部でこの 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 に答える