I'm trying to use Masonry for a project but i'm failry inexperienced with JS. I ran into an issue where hiding the first item in the Masonry grid caused the rest of the grid items to form into a single column.
I can hide and show as many other items as i want, just not the first one it seems.
The codepen below reproduces the problem, press "Create" to form the Masonry layout then "Hide" to hide the divs with class "special"...
http://codepen.io/anon/pen/ByxmMv
Removing the class "special" from the first div will demonstrate the desired layout behavior.
I was hoping that i'm just doing something wrong but if i'm not can someone demonstrate a workaround?
Thanks of any help.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Masonry</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://masonry.desandro.com/masonry.pkgd.js"></script>
<script type="text/javascript">
function hide() {
$(".special").hide();
msnry.layout();
}
function show() {
$(".special").show();
msnry.layout();
}
function create() {
container = document.querySelector('#container');
msnry = new Masonry( container, {
itemSelector: ".item",
isAnimated: true
});
}
function destroy() {
msnry.destroy();
}
</script>
<style type="text/css">
#container {
background: #EEE;
max-width: 80%;
margin: 10px;
}
.item {
width: 150px;
height: 150px;
float: left;
background: green;
border: 2px solid #333;
margin: 10px;
}
.item:nth-child(3n){
height: 100px;
}
.special {
background:orange;
}
</style>
</head>
<body>
<button onclick="create()">Create</button>
<button onclick="destroy()">Destroy</button>
<button onclick="hide()">Hide</button>
<button onclick="show()">Show</button>
<div id="container">
<div class="item special"></div>
<div class="item special"></div>
<div class="item special"></div>
<div class="item"></div>
<div class="item special"></div>
<div class="item special"></div>
<div class="item"></div>
<div class="item special"></div>
<div class="item delete"></div>
<div class="item"></div>
<div class="item special"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>