Search code examples
htmlcssangularjsjquery-masonry

Grid/Tile view with angularjs

I have 100 number of divs of 100px width, which can fit into a 250px width parent. Regardless of height, I need the divs to be displayed in rows, as shown in the picture. I have tried resolving this with css,and sadly I understood the reality.

enter image description here

Is there any angularjs plugin i can make use of?

I have heard about jquery masonry,is there any better option?

As @Divyanshu Maithani asked for a plunker with my current problem, Please see the plunker link below in which i tried to solve my problem with angular-masonry

enter image description here

<div masonry>
    <div ng-repeat="item in items" class="masonry-brick item">
      {{item.name}}
      <button class="toggle-button" ng-click="item.show=!item.show">show</button>
      <div ng-if="item.show" class="hidden-box">
        This is a hidden box for {{$index+1}}th item.
      </div>
    </div>
  </div>

Plunker DEMO

And i am looking for other options also,since i don't want to end up my question with a jquery plugin like angular-masonry.Any help will be appreciated.Thanks

Solution

  • Go for AngularJS Masonry. You can see the demo at the homepage. And using it is simple using a masonry-brick class:

    <div masonry>
    <div class="masonry-brick" ng-repeat="brick in bricks">
        <img ng-src="{{ brick.src }}" alt="A masonry brick">
    </div>
</div>

    UPDATE

    In order for your masonry-brick to not overlap with each other, you need to reload masonry whenever you show or hide an inner div. I've added a function to do so on ng-click which will also broadcast a masonry.reload event to reload the same.

    Check this working code.

    JS

    $scope.showItem = function(index) {
    $scope.items[index].show = !($scope.items[index].show);
    $scope.$broadcast('masonry.reload');
}

    HTML

    <div masonry>
    <div ng-repeat="item in items" class="masonry-brick item">
      {{item.name}}
      <button class="toggle-button" ng-click="showItem($index)">show</button>
      <button class="toggle-button" ng-click="remove($index)">X</button>
      <div ng-if="item.show" class="hidden-box">
        This is a hidden box for {{$index+1}}th item.
      </div>
    </div>
</div>

    EDIT

    There seems to be a problem due to the fact that masonry reloads instantly while the animation of the masonry transition takes time. I've added some transition duration and $timeout in this plunk.