"gallery filters"
Bootstrap 3.0.0 Snippet by mannack

<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()); } } } } })

Related: See More


Questions / Comments: