3

一言で言えば、Angular-masonry ディレクティブ ( http://passy.github.io/angular-masonry/ )を使用して達成したいことは、次のようなものです: http://codepen.io/desandro/pen/htsui

私はさまざまな方法を試しましたが、大きな div は次の div の上に広がるだけです。

これはHTMLです：

<div class="row" ng-controller="DemoCtrl">
        <div class="span12">
            <div masonry >
                <div class="masonry-brick" ng-repeat="brick in bricks">
                     <div ng-class="brick.cssClass"  ng-click="changeBrick($index)">
                        <img ng-src="{{brick.src}}" alt="A masonry brick" >
                        <span>Here is a load of text to see what fits in here and such </span>
                     </div>
                </div>
            </div>
        </div>
    </div>

これは、Angular コードのスニペットです。

app.controller('DemoCtrl', function ($scope, $timeout,$element) {

..

 $scope.changeBrick= function changeBrick(i) {
  $scope.bricks[i].cssClass = 'big';
  $element.masonry();
  $element.masonry('layout');
 }
}

テスト用のスタイルは次のとおりです。

.small{
 width: 200px;
 background-color: lime;
}

.big{
 width: 400px;
 background-color: red;
}

しばらくすると、div は次の div のすぐ上まで広がってしまいました。私は石積みにそのことをやってもらい、他の div を再配置してもらいたいと思っています。

4

1 に答える 1

0

masonry.reloadangular-masonry を取得してレイアウトを更新するメッセージをブロードキャストしてみてください。私は似たような問題に遭遇しましたが、これはうまくいくようです: https://stackoverflow.com/a/27967782/3191599

function refresh() {
    common.$timeout(function () { $scope.$broadcast('masonry.reload'); }, 100);
}
于 2015-01-15T16:12:03.197 に答える