Masonry js won't bunch images vertically
Posted
by
user1449737
on Stack Overflow
See other posts from Stack Overflow
or by user1449737
Published on 2012-07-09T20:42:50Z
Indexed on
2012/07/09
21:15 UTC
Read the original article
Hit count: 208
jQuery
|jquery-masonry
The images are being aligned horizontally correctly but they are all spaced out vertically.. Take a look here http://brstudios.co.uk/testing to see what I mean properly..
My mark up is as followed (simplified):
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://masonry.desandro.com/jquery.masonry.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/desandro/imagesloaded/master/jquery.imagesloaded.min.js"></script>
<script type="text/javascript">
var $container = $('.portfolio-container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.break',
columnWidth : 429
});
});
</script>
<style type="text/css">
.break {
float: left;
width: 429px;
margin: 10px 20px;
}
</style>
</head>
<body>
<div class="portfolio-container">
<?php do { ?>
<div class="break">
// Contents taken from MySQL //
</div>
<?php } while ($row_displayPosts = mysql_fetch_assoc($displayPosts)); ?>
</div>
</body>
</html>
I think part of it is working but as you can see by the link provided it isn't moving the elements together vertically. Does anyone have any pointers?
© Stack Overflow or respective owner
