Skip to content

Instantly share code, notes, and snippets.

@MrAntix

MrAntix/index.html

Created January 7, 2015 00:09
Show Gist options
  • Save MrAntix/c4edb6a14c9d419bfc44 to your computer and use it in GitHub Desktop.
Save MrAntix/c4edb6a14c9d419bfc44 to your computer and use it in GitHub Desktop.
Download ZIP
angularjs cell layout // source http://jsbin.com/xeyife
Raw
index.html
<!DOCTYPE html>
<html ng-app="antix.cells">
<head>
<meta name="description" content="angularjs cell layout" />
<script src="http://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>
<style id="jsbin-css">
*{
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;
}
</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>
<script id="jsbin-javascript">
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);
});
}
};
}
]);
</script>
<script id="jsbin-source-html" type="text/html"><!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></script>
<script id="jsbin-source-css" type="text/css"> *{
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;
}</script>
<script id="jsbin-source-javascript" type="text/javascript"> 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);
});
}
};
}
]);
</script></body>
</html>
Raw
jsbin.xeyife.css
*{
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;
}
Raw
jsbin.xeyife.js
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);
});
}
};
}
]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment