javascript - 砌体不工作

Question

我想在我的代码上使用 Masonry 级联网格布局库，但它不起作用。

样式表：

.post {
    background: #FFF;
    padding: 10px;
    border-bottom: 3px solid #e6e6e6;
    width: 30.7%;
    margin: 10px;
}

源代码：

<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>

脚本（loggedIn.js）：

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

我确定地址的完整性，但有什么问题？

编辑：

奇怪的是，当我向代码添加警报时，JS它可以正常工作！

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

Answer 1

您可以使用以下代码：

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

注意：如果您使用 $.getScript 函数，则会发生此问题。