Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html ng-app="antix.cells">
<head>
<meta name="description" content="angularjs cell layout" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
​
  <meta charset="utf-8">
  <title>JS Bin</title>
  
  <style>
    //.Three{margin-top:-25px}
    //.Five{margin-top:-50px}
    .found{
      border-color:green;
    }
  </style>
</head>
<body ng-controller="demo">
​
    <cells-container cells="cells">
      <cell ng-repeat="cell in cells" 
            class="{{cell.content}}"
            ng-style="{'height':cell.height+'px'}">
        <div>
        {{cell.content}}
          </div>
      </cell>
    </cells-container>
​
</body>
</html>
 
*{
  box-sizing:border-box;
}
cells-container{
  position:absolute;
  overflow:auto;
  width:600px;      
}
cell{
  float:left;
  width:33.3%;
  padding:4px;
}
cell>div{
  font-family:verdana, sans-serif;
  color:#fff;
  height:100%;
  border-radius:2px;
  padding:10px;
  box-shadow:1px 1px 5px rgba(0,0,0,.1)
}
cell:nth-child(3n)>div{
  background-color:#e66;
}
cell:nth-child(3n+1)>div{
  background-color:#6e6;
}
cell:nth-child(3n+2)>div{
  background-color:#88e;
}
 
  angular.module('antix.cells', [])
  .controller('demo',[
    '$scope',
    function($scope){
     
      $scope.cells = [
        {content:'One', height: 150},
        {content:'Two', height:225},
        {content:'Three', height:255},
        {content:'Four', height:105},
        {content:'Five', height:230},
        {content:'Six', height:259},
        {content:'Seven', height:110},
        {content:'Eigth', height:120}
      ];
    }
  ])
  .directive('cellsContainer',[
      function(){
  
          return {
              restrict:'AE',
              scope:{cells:'@'},
              controller:function($scope){
                var columns = {};
                 $scope.cellElements = [];
                
                this.addElement = function(cellElement){
                  
                  var left=cellElement[0].offsetLeft,
                      top=cellElement[0].offsetTop,
                      height=cellElement[0].offsetHeight;
                  
                  var column='_'+left;
                  if(!columns[column]) columns[column] = 0;
                  
                  cellElement.css({marginTop:(columns[column]-top)+'px'});
                  
                  columns[column]+=height;
                  
                  $scope.cellElements.push(cellElement);
                };                
              }
          };
      }
  ])
  .directive('cell',[
      function(){
  
          return {
              restrict:'AE',
              require:'^cellsContainer',
              link:function(
                $scope,
                element,
                attributes,
                cellsContainer){
               
                $scope.$evalAsync(function() {
                  
                   cellsContainer.addElement(element);
                  
               });               
              }
          };
      }
  ]);
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
MrAntixpro
0viewers