javascript - Masonry doesn't work -

javascript - Masonry doesn't work -

i want utilize masonry cascading grid layout library on code doesn't work.

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'm sure integrity of addresses what's problem?

edit:

strangely when add together alert js code works correctly!

$(document).ready(function($){ var $container = $('#content'); alert($container.html()); // initialize $container.masonry({ columnwidth: 100, itemselector: '.post' }); });

you can utilize code:

$(document).ready(function($){ var $container = $('#content'); settimeout(function(){ // initialize $container.masonry({ columnwidth: 100, itemselector: '.post' }); }, 200); });

note: if utilize $.getscript function issue happen.

javascript jquery html css masonry