Question

我有一个3 * 3的网格布局。它应该看起来像这样： enter image description here

然后我添加了shuffle.js来对网格进行洗牌并过滤它们。但是，网格布局变成了这个。 enter image description here

为什么会发生这种情况以及如何解决？谢谢

我的HTML代码：

<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">&copy;Siyan Zhao 2014</div>
</div>  

</body>

我的CSS代码：

/* -------------------------------------*/
#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;
}

我的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 );
});

Answer 1

您应该确保设置了容器父div：

#content { position:relative; }

或

#content . grid3 { position:relative; }

shuffle.js：网格的位置在shuffle之后移动

1 个答案: