I'm having trouble getting the Masonry cascading grid layout library to work in my code.
Stylesheet:
.post {
background: #FFF;
padding: 10px;
border-bottom: 3px solid #e6e6e6;
width: 30.7%;
margin: 10px;
}
Source code:
<div id="content">
<?php
for($i = 1; $i <= 12; $i++) {
?>
<div class="post fleft">
<div class="title bbottom">
<div class="fright">
<div class="avatar fright" style="background-image: url(images/avatar.png)"></div>
<span class="fright">سید امیرحسین رهنمافرد</span><br />
<span class="fright">روشن</span>
</div>
<div class="fleft">
<span class="fleft">14 خرداد 93 | 20:22</span><br />
<span class="fleft">غزل در دیوان غزلیات</span>
</div>
<div class="clear"></div>
</div>
</div>
<?php } ?>
<script src="<?php echo ROOT ?>/scripts/jquery-1.11.0.min.js"></script>
<script src="<?php echo ROOT ?>/scripts/masonry.pkgd.min.js"></script>
<script src="<?php echo ROOT ?>/scripts/loggedIn.js"></script>
Script (loggedIn.js):
$(document).ready(function($){
var $container = $('#content');
$container.masonry({
columnWidth: 200,
itemSelector: '.post'
});
});
I have verified that the addresses are correct, so why isn't it working?
EDIT:
Interestingly, adding an alert to the JS code seems to fix the issue!
$(document).ready(function($){
var $container = $('#content');
alert($container.html());
// initialize
$container.masonry({
columnWidth: 100,
itemSelector: '.post'
});
});