I have a 3*3 grid layout. It should look something like this:
Then I added shuffle.js to shuffle the grids and filter them. However, the grid layout turns into this.
Why did this happen and how to fix it?? Thank you
My HTML code:
<body>
<div id="wrapper">
<div id="menunav">
<a href="index.html"><header id="logo">Siyan Zhao</header></a>
<nav id="nav">
<ul>
<li><a href="index.html" class="thispage">Portfolio</a></li>
<li><a href="aboutme.html">About Me</a></li>
<li><a href="skills.html">Skills</a></li>
<li><a href="resume.html">Resume</a></li>
</ul>
</nav>
<ul id="filter">
<li><a class="active" href="#" data-group="all">All</a></li>
<li><a href="#" data-group="ui">UI/UX</a></li>
<li><a href="#" data-group="design">Design</a></li>
<li><a href="#" data-group="research">Research</a></li>
<li><a href="#" data-group="illustration">Illustration</a></li>
</ul>
</div>
<!--Main content in the format of grids-->
<div id="content">
<div class="grid3">
<article class="bucket">
<a href="firefly-ticket.html">
<img src="images/Firefly/firefly_icon.png" alt=""/>
<div class="img-overlay">
<h5>Firefly: A Smart Ticket</h5>
</div>
</a>
</article>
<article class="bucket">
<a href="Chance.html">
<img src="images/Chance/Chance Icon_2.png" alt=""/>
<div class="img-overlay"
data-group='["all", "design", "research", "ui"]'>
<h5>Chance</h5>
</div>
</a>
</article>
<article class="bucket">
<a href="monogram.html">
<img src="images/monogram.jpg" alt=""/>
<div class = "img-overlay"
data-group='["all", "design", "illustration"]'>
<h5>Monogram</h5>
</div>
</a>
</article>
<article class="bucket">
<a href="gestalt-composition.html">
<img src="images/gestalt-cover.png" alt=""/>
<div class="img-overlay"
data-group='["all", "design", "illustration"]'>
<h5>Gestalt Composition</h5>
</div>
</a>
</article>
<article class="bucket">
<a href="redthread.html">
<img src="images/redThread.jpg" alt=""/>
<div class="img-overlay"
data-group='["all", "design", "illustration"]'>
<h5>The Red Thread</h5>
</div>
</a>
</article>
<article class="bucket">
<a href="typographic-hierarchy.html">
<img src="images/poster copy.png" alt=""/>
<div class="img-overlay"
data-group='["all", "design", "illustration"]'>
<h5>Typographic Hierarchy</h5>
</div>
</a>
</article>
</div>
</div>
<div id="footer">©Siyan Zhao 2014</div>
</div>
</body>
My CSS code:
/* -------------------------------------*/
#wrapper {
background-color: #FFFfff;
width: 70%;
padding-bottom: 0px;
margin: 0 auto;
position: relative;
min-height: 100%;
overflow-x: hidden;
}
/* Left hand side menu style */
/* -------------------------------------*/
#menunav {
z-index: 20;
background-color: #ffffff;
position: fixed;
width: 210px;
padding-top: 80px;
display: block;
margin: 0px;
border-right-style: none;
border-color: rgba(0,0,0,1.00);
border-right-width: thin;
font-family: 'Droid Sans', sans-serif;;
font-weight: normal;
}
#logo {
text-align: left;
margin-bottom: 48px;
padding-top: 18px;
font-family: "Century Gothic";
font-weight: bold;
font-size:2.3em;
}
#menunav ul {
list-style-type: none;
padding: 0px 0px 0px 0px;
}
#menunav #nav a{
text-align: left;
font-size: 1em;
padding-top: 18px;
border-color: rgba(0,0,0,1.00);
border-bottom-style: solid;
border-width: thin;
-webkit-transition: padding-left 0.3s ease-in-out;
-moz-transition: padding-left 0.3s ease-in-out;
-o-transition: padding-left 0.3s3 ease-in-out;
-ms-transition: padding-left 0.3s3 ease-in-out;
transition: padding-left 0.3s ease-in-out;
}
#menunav #nav a:hover {
padding-left: 50px;
}
#menunav #nav a:active, #mainnav a:focus, #menunav #nav a.thispage{
text-decoration: none;
font-weight: bold;
/*ovrwrite hover effect for active page */
padding-left: 0;
}
/* Formatting for main page grid area*/
/* -------------------------------------*/
.bucket {
float: left;
margin: 0% 0%;
position: relative;
-webkit-transition: .5s all;
-moz-transition: .5s all;
-o-transition: .5s all;
-ms-transition: .5s all;
transition: .5s all;
width: 33.3%;
}
.grid3 .bucket:nth-of-type(3n+1) {
clear: left;
}
.bucket img {
height: auto;
width: 100%;
/*Align image to the baseline to delete white spacing*/
vertical-align: bottom;
}
/*hover over overlay effect*/
/* -------------------------------------*/
.img-overlay {
background-color: rgba(0,0,0,0.7);
bottom: 0;
left: 0;
top: 0;
opacity: 0;
overflow: hidden;
position: absolute;
width: 100%;
z-index: 1000;
transition: opacity 0.25s;
-webkit-transition: opacity 0.25s;
}
.img-overlay h5{
opacity: 1;
display: inline-block;
margin: auto;
font-weight: normal;
font-size: 1.3vw;
line-height: 1vw;
position: absolute;
top: 30%;
right: 10px;
left: 10px;
color: rgba(255,255,255,1.00);
text-align: center;
}
.img-overlay p{
opacity: 1;
display: inline-block;
margin: auto;
position: absolute;
top: 47%;
right: 10px;
left: 10px;
color: rgba(255,255,255,1.00);
text-align: center;
font-family: 'Droid Serif', serif;
font-size: 1.2vw;
line-height: 1vw;
/*vertical-align: middle;*/
}
.bucket:hover .img-overlay {
opacity: 1;
}
My Javascript
$(document).ready(function() {
/* Shuffling buckets */
var $grid3 = $('.grid3');
$grid3.shuffle({
itemSelector: '.bucket'
});
$('#filter a').click(function (e) {
e.preventDefault();
// set active class
$('#filter a').removeClass('active');
$(this).addClass('active');
// get group name from clicked item
var groupName = $(this).attr('data-group');
// reshuffle grid
$grid3.shuffle('shuffle', groupName );
});