砌体没有加载......在我调整窗口大小之前，元素不会重新对齐

Question

大家好我正在为我的网站使用砌体布局，但是我遇到的问题是，在我调整浏览器窗口大小之前，砌体项目没有自行安排。在调整浏览器窗口大小后，它会安排。

<div id="container">
<div class="row"> 
    <!-- STRATEGIES -->

        <div class="col-sm-4 child-item clearfix">
            <div class="group-a">
                <div class="title-a title" style="display: none;">
                    <h3><?php echo $groupa; ?></h3>
                </div><!-- title -->

                <div class="content-a content" style="display: none;">
                    <div class="row">

                        <div id="RIG8A" style="display: none;">
                            <div class="col-xs-2">
                                <img src="../assets/images/compass.jpg">
                            </div><!-- col -->
                            <div class="col-xs-10">
                                <h4><?php echo $rig8a_content; ?></h4>
                                <div id="pu-icon">
                                    <img id="rig8a_p" src="../assets/icon/pu_icon_faded.png">
                                    <img id="rig8a_s" src="../assets/icon/su_icon_faded.png">
                                </div><!-- pu-icon -->
                            </div>
                        </div> <!-- RIG8A -->

<script>$(window).on('load',function() {$('#container').masonry({itemSelector: '.child-item', columnWidth: '.child-item',percentPosition: true});});</script>