I am trying to use Masonry for photos on my site, and I just added it at https://willhay.io/masonry/ to make sure everything was working before I tried to put it on the photos page. However, the divs are not lining up correctly and there is lots of blank space between the rows.
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Masonry Test</title>
<link rel="stylesheet" href="mason.css"/>
<script src="../masonry.pkgd.min.js"></script>
<script src="../jquery-1.11.3.min.js"></script>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
<script>
$('.grid').masonry({
// options
itemSelector: '.grid-item',
columnWidth: 160
});
</script>
</head>
<body>
<h1>Masonry - columnWidth</h1>
<div class="grid">
<div class="grid-item"></div>
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item grid-item--height3"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--width3"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--width2 grid-item--height3"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height3"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
</div>
</body>
</html>
CSS
*{
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body { font-family: sans-serif; }
/* ---- grid ---- */
.grid {
background: #EEE;
max-width: 100%;
}
/* clearfix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- grid-item ---- */
.grid-item {
width: 160px;
height: 120px;
float: left;
background: #D26;
border: 2px solid #333;
border-color: hsla(0, 0%, 0%, 0.5);
border-radius: 5px;
}
.grid-item--width2 { width: 320px; }
.grid-item--width3 { width: 480px; }
.grid-item--width4 { width: 640px; }
.grid-item--height2 { height: 200px; }
.grid-item--height3 { height: 260px; }
.grid-item--height4 { height: 360px; }
This code is pulled straight from the Masonry website, with only extra functionality removed (resizing on click, hover states, etc.).
Turns out I didnt have $(document).ready(function() {, once I added that it worked. New js is:
Compared to just
which was incorrect and not loading correctly. I think it had something to do with masonry calculating the div positions before the actual page was loaded. Not really sure but I'm glad I figured it out finally :)