CODEWITHSUNDEEP
htmlcssangularjsjquery-masonry
Nikhil Mohanan
Nikhil Mohanan

Reputation: 1260

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

Upvotes: 3

Views: 2931

Answers (3)

Divyanshu Maithani
Divyanshu Maithani

Reputation: 14976

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.

Upvotes: 3

nashcheez
nashcheez

Reputation: 5183

This is actually possible with Pure CSS and HTML. CSS 3 specifications provide for column-gap & column-width property that makes it possible to define the gap between the columns.

Popular browsers have started supporting the same (-webkit-column-width, -webkit-column-gap, -moz-column-width, -moz-column-gap are all supported).

So the widths and gaps can be written in the following way:

#columns {
  -webkit-column-width: 220px;
  -webkit-column-gap: 15px;
  -moz-column-width: 220px;
  -moz-column-gap: 15px;
  column-width: 220px;
  column-gap: 15px;
}

I have made a fiddle which shows a working example. Works perfectly on Chrome, Firefox and Safari.

https://jsfiddle.net/nashcheez/3cf9qrap/3/

Upvotes: 1

Santhosh kesavan
Santhosh kesavan

Reputation: 68

Here's the example you looking for.Click the link

Html/View

 <div ng-repeat="item in items" class="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>

Hope it will be useful for you.

Upvotes: 0

Related Questions