<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="work">
<div class="category-buttons">
<a href="#" class="active all" data-group="all">All</a>
<a href="#" data-group="city">city</a>
<a href="#" data-group="nature">nature</a>
<a href="#" data-group="food">food</a>
<a href="#" data-group="sports">sports</a>
<a href="#" data-group="people">people</a>
</div>
<div id="grid" class="grid">
<a class="card" href="#" data-groups="city,">
<img src="http://lorempixel.com/200/150/city" />
<div class="title">Project Title test me more please do this for me please dood.</div>
</a>
<a class="card" href="#" data-groups="nature,">
<img src="http://lorempixel.com/200/150/nature" />
<div class="title">Project Title</div>
</a>
<a class="card" href="#" data-groups="food,">
<img src="http://lorempixel.com/200/150/food" />
<div class="title">Project Title</div>
</a>
<a class="card" href="#" data-groups="sports,people,">
<img src="http://lorempixel.com/200/150/sports" />
<div class="title">Project Title</div>
</a>
<a class="card" href="#" data-groups="people,food,">
<img src="http://lorempixel.com/200/150/people" />
<div class="title">Project Title</div>
</a>
<a class="card" href="#" data-groups="city,people,">
<img src="http://lorempixel.com/200/150/city/2" />
<div class="title">Project Title wow this is so sext</div>
</a>
<a class="card" href="#" data-groups="nature,food,">
<img src="http://lorempixel.com/200/150/nature/2" />
<div class="title">Project Title</div>
</a>
<a class="card" href="#" data-groups="food,people,">
<img src="http://lorempixel.com/200/150/food/2" />
<div class="title">Project Title test me please dood wow this could be better</div>
</a>
<a class="card" href="#" data-groups="sports,people,">
<img src="http://lorempixel.com/200/150/sports/2" />
<div class="title">Project Title</div>
</a>
<a class="card" href="#" data-groups="people,food">
<img src="http://lorempixel.com/200/150/people/2" />
<div class="title">Project Title</div>
</a>
<div class="guide"></div>
</div>
</div>
.work {
padding-bottom: 40px;
margin-top: 60px;
}
.work * {
box-sizing: border-box;
}
.work .category-buttons {
text-align: center;
margin: 0 0 60px 0;
}
@media (max-width: 610px) {
.work .category-buttons {
margin: 0 0 30px 0;
}
.work .category-buttons a {
display: inline-block;
width: 46%;
padding: 12px 10px !important;
margin: 1.5% 1% !important;
}
.work .category-buttons a:nth-child(even) {
margin-right: 0;
}
.work .category-buttons a:nth-child(odd) {
margin-left: 0;
}
}
@media (min-width: 611px) {
.work .category-buttons a:first-child {
margin-left: 0;
}
.work .category-buttons a:last-child {
margin-right: 0;
}
}
.work .category-buttons a {
color: #9A9A9A;
text-decoration: none;
padding: 9px 15px;
border: 1px solid #9A9A9A;
margin: 0 10px;
cursor: pointer;
}
.work .category-buttons a.active {
color: #373B3D;
border: 1px solid #373B3D;
}
.work .grid {
margin-top: 40px;
width: 100%;
max-width: 960px;
margin: 0 auto;
position: relative;
-webkit-transition: all 750ms cubic-bezier(1, 0, 0, 1);
transition: all 750ms cubic-bezier(1, 0, 0, 1);
}
@media (max-width: 960px) {
.work .grid {
width: 700px;
}
}
@media (max-width: 720px) {
.work .grid {
width: 100%;
}
}
.work .grid .animating {
-webkit-transition: all 750ms cubic-bezier(0.175, 0.885, 0.32, 1.1);
transition: all 750ms cubic-bezier(0.175, 0.885, 0.32, 1.1);
}
.work .grid .setScale {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.work .grid .show {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.work .card {
background: #fff;
display: block;
text-decoration: none;
color: #2b2b2b;
width: 32%;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 5px rgba(0, 0, 0, 0.15);
transform-origin: center center;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
opacity: 0;
}
@media (max-width: 700px) {
.work .card {
width: 49.25%;
}
}
@media (max-width: 480px) {
.work .card {
width: 100%;
}
}
.work .card img {
display: block;
width: 100%;
}
.work .card .title {
padding: 10px;
color: #2b2b2b;
}
.work .guide {
width: 32%;
position: absolute;
left: 0;
top: 0;
z-index: -1000;
}
@media (max-width: 700px) {
.work .guide {
width: 49.25%;
}
}
@media (max-width: 480px) {
.work .guide {
width: 100%;
}
}
$(document).ready(function() {
var projects = $('.card');
var filteredProjects = [];
var selection = "all";
var running = false;
window.setTimeout(function() {
$('.all').trigger('click');
}, 150);
$(window).resize(function() {
buildGrid(filteredProjects);
});
$('.category-buttons a').on('click', function(e) {
e.preventDefault();
if (!running) {
running = true;
selection = $(this).data('group');
$('.category-buttons a').removeClass('active');
$(this).addClass('active');
filteredProjects = [];
for (i = 0; i < projects.length; i++) {
var project = projects[i];
var dataString = $(project).data('groups');
var dataArray = dataString.split(',');
dataArray.pop();
if (selection === 'all') {
$(project).addClass('setScale').queue(function(next) {
filteredProjects.push(project);
next();
}).queue(function(next) {
$(this).removeClass('setScale');
next();
}).queue(function(next) {
$(this).addClass('animating show')
next();
}).delay(750).queue(function() {
running = false;
$(this).removeClass('animating').dequeue();
});
} else {
if ($.inArray(selection, dataArray) > -1) {
$(project).addClass('setScale').queue(function(next) {
filteredProjects.push(project);
next();
}).queue(function(next) {
$(this).removeClass('setScale');
next();
}).queue(function(next) {
$(this).addClass('animating show')
next();
}).delay(750).queue(function() {
running = false;
$(this).removeClass('animating').dequeue();
});
/*$(project).css({
'-webkit-transition': 'all 750ms cubic-bezier(0.175, 0.885, 0.32, 1.1)',
'transition': 'all 750ms cubic-bezier(0.175, 0.885, 0.32, 1.1);',
'-webkit-transform': 'scale(' + 1 + ')',
'-ms-transform': 'scale(' + 1 + ')',
'transform': 'scale(' + 1 + ')',
'opacity': 1
});*/
} else {
$(project).queue(function(next) {
$(this).addClass('animating');
next();
}).queue(function(next) {
$(this).removeClass('show');
next();
}).delay(750).queue(function() {
$(this).removeClass('animating').dequeue();
});
/*$(project).css({
'-webkit-transition': 'all 750ms cubic-bezier(0.175, 0.885, 0.32, 1.1)',
'transition': 'all 750ms cubic-bezier(0.175, 0.885, 0.32, 1.1);',
'-webkit-transform': 'scale(' + 0 + ')',
'-webkit-transform': 'scale(' + 0 + ')',
'-ms-transform': 'scale(' + 0 + ')',
'transform': 'scale(' + 0 + ')',
'opacity': 0
});*/
}
}
}
buildGrid(filteredProjects);
}
})
function buildGrid(projects) {
var left = 0;
var top = 0;
var totalHeight = 0;
var largest = 0;
var heights = [];
for (i = 0; i < projects.length; i++) {
$(projects[i]).css({
height: 'auto'
});
heights.push($(projects[i]).height());
}
var maxIndex = 0;
var maxHeight = 0;
for (i = 0; i <= heights.length; i++) {
if (heights[i] > maxHeight) {
maxHeight = heights[i];
maxIndex = i;
$('.guide').height(maxHeight);
}
if (i === heights.length) {
for (i = 0; i < projects.length; i++) {
$(projects[i]).css({
position: 'absolute',
left: left + '%',
top: top
});
left = left + ($('.guide').width() / $('#grid').width() * 100) + 2;
if (i === maxIndex) {
$(projects[i]).css({
height: 'auto'
});
} else {
$(projects[i]).css({
height: maxHeight
});
}
if ((i + 1) % 3 === 0 && projects.length > 3 && $(window).width() >= 700) {
top = top + $('.guide').height() + 20;
left = 0;
totalHeight = totalHeight + $('.guide').height() + 20;
} else if ((i + 1) % 2 === 0 && projects.length > 2 && $(window).width() < 700 && $(window).width() >= 480) {
top = top + $('.guide').height() + 20;
left = 0;
totalHeight = totalHeight + $('.guide').height() + 20;
} else if ((i + 1) % 1 === 0 && projects.length > 1 && $(window).width() < 480) {
top = top + $('.guide').height() + 20;
left = 0;
totalHeight = totalHeight + $('.guide').height() + 20;
}
$('#grid').height(totalHeight + $('.guide').height());
}
}
}
}
})
