var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, Books) {
Books.get().then(function(data) {
$scope.rows = getRows(data, 6);
});
function getRows(array, columns) {
var rows = [];
//http://stackoverflow.com/questions/8495687/split-array-into-chunks
var i, j, temparray, chunk = columns;
for (i = 0, j = array.length; i < j; i += chunk) {
temparray = array.slice(i, i + chunk);
rows.push(temparray);
}
return rows;
}
$scope.show = {
more: false
};
});
app.factory('Books', ['$http', function($http) {
return {
get: function() {
return $http.get('books.json').then(function(response) {
return response.data;
});
}
};
}
]);
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<button ng-click="show.more = true;" ng-show="show.more == false">Show More</button>
<button ng-click="show.more = false;" ng-show="show.more == true">Show Less</button>
<div class="container">
<div ng-repeat="row in rows" ng-show="$index==1 || show.more==true">
<div class="col-xs-4 col-md-2" ng-repeat="book in row">
<a href="">
<img ng-src="{{book.url}}" class="img-responsive book" />
</a>
</div>
<div class="col-xs-12 shelf"></div>
</div>
</div>
</body>
</html>
.book {
padding: 15px 0 0 0;
margin: auto;
}
a:before { /* Just to give a little puddle of a shadow without adding another element */
content: '';
display: block;
width: 80%;
height: 1em;
background: rgba(0,0,0,.35);
border-radius: 50%;
position: absolute;
bottom:-10px;
-webkit-filter: blur(5px);
filter: blur(5px);
z-index:-5;
}
.shelf {
border-bottom: 30px solid #a5a5a5;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
top: -15px;
z-index: -10;
}
/*Example adding pseudo element to give shelf depth*/
.shelf:after {
content: '';
background: #686868;
height: 20px;
width: calc(100% + 40px); /*IE9+*/
position: absolute;
top: 30px;
left: 0;
right: 0;
z-index: 1;
margin: 0 -20px;
}
[
{
"index": 0,
"url": "http://placehold.it/150x190/e8117f/fff&text=Book%20Title"
},
{
"index": 1,
"url": "http://placehold.it/150x190/e8117f/fff&text=Book%20Title"
},
{
"index": 2,
"url": "http://placehold.it/150x190/e8117f/fff&text=Book%20Title"
},
{
"index": 3,
"url": "http://placehold.it/150x190/e8117f/fff&text=Book%20Title"
},
{
"index": 4,
"url": "http://placehold.it/150x190/e8117f/fff&text=Book%20Title"
},
{
"index": 5,
"url": "http://placehold.it/150x190/e8117f/fff&text=Book%20Title"
},
{
"index": 6,
"url": "http://placehold.it/150x190/e8117f/fff&text=Book%20Title"
},
{
"index": 7,
"url": "http://placehold.it/150x190/e8117f/fff&text=Book%20Title"
},
{
"index": 8,
"url": "http://placehold.it/150x190/e8117f/fff&text=Book%20Title"
},
{
"index": 9,
"url": "http://placehold.it/150x190/e8117f/fff&text=Book%20Title"
},
{
"index": 10,
"url": "http://placehold.it/150x190/e8117f/fff&text=Book%20Title"
},
{
"index": 11,
"url": "http://placehold.it/150x190/e8117f/fff&text=Book%20Title"
},
{
"index": 12,
"url": "http://placehold.it/150x190/e8117f/fff&text=Book%20Title"
},
{
"index": 13,
"url": "http://placehold.it/150x190/e8117f/fff&text=Book%20Title"
},
{
"index": 14,
"url": "http://placehold.it/150x190/e8117f/fff&text=Book%20Title"
},
{
"index": 15,
"url": "http://placehold.it/150x190/e8117f/fff&text=Book%20Title"
},
{
"index": 16,
"url": "http://placehold.it/150x190/e8117f/fff&text=Book%20Title"
},
{
"index": 17,
"url": "http://placehold.it/150x190/e8117f/fff&text=Book%20Title"
},
{
"index": 18,
"url": "http://placehold.it/150x190/e8117f/fff&text=Book%20Title"
},
{
"index": 19,
"url": "http://placehold.it/150x190/e8117f/fff&text=Book%20Title"
},
{
"index": 20,
"url": "http://placehold.it/150x190/e8117f/fff&text=Book%20Title"
},
{
"index": 21,
"url": "http://placehold.it/150x190/e8117f/fff&text=Book%20Title"
},
{
"index": 22,
"url": "http://placehold.it/150x190/e8117f/fff&text=Book%20Title"
},
{
"index": 23,
"url": "http://placehold.it/150x190/e8117f/fff&text=Book%20Title"
},
{
"index": 24,
"url": "http://placehold.it/150x190/e8117f/fff&text=Book%20Title"
},
{
"index": 25,
"url": "http://placehold.it/150x190/e8117f/fff&text=Book%20Title"
},
{
"index": 26,
"url": "http://placehold.it/150x190/e8117f/fff&text=Book%20Title"
},
{
"index": 27,
"url": "http://placehold.it/150x190/e8117f/fff&text=Book%20Title"
}
]