石工不起作用

Question

I want to use Masonry cascading grid layout library on my code but it 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 about integrity of the addresses but what's the problem?

EDIT :

Strangely when I add an alert to the JS code it works correctly!

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

Answer 1

You can use this code:

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

Note: if you use $.getScript function this issue will happen.