Javascript 首次加载时瀑布显示错误

我有一个瀑布式页面，如下所示：

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<link rel="stylesheet" href="css/reset.css"/>
<link rel="stylesheet" href="css/waterfall.css"/>
<div id="container" style="margin-top:15px;"></div>
<script type="text/x-handlebars-template" id="waterfall-tpl">
{{#result}}
    <div class="item">
        <a href="EventDetail.aspx?eventID={{eventid}}"><img src="{{cover}}" width="{{width}}" /></a>
        <p><b>{{title}}</b></p>
        <p>地點：{{city}}</p>
    </div>
{{/result}}
</script>
<script src="js/libs/jquery/jquery.js"></script>
<script src="js/libs/handlebars/handlebars.js"></script>
<script src="js/waterfall.js"></script>
<script>
$('#container').waterfall({
    itemCls: 'item',
    colWidth: 282,  
    gutterWidth: 15,
    gutterHeight: 15,
    maxPage: 5,
    checkImagesLoaded: false,
    callbacks: {
        loadingFinished: function($loading, isBeyondMaxPage) {
            if ( !isBeyondMaxPage ) {
                $loading.fadeOut();
            } else {
                $loading.hide();
                $('#page-navigation').show();
            }
        }
    },
    path: function(page) {
        return 'ws/ArtkitData.asmx/DefaultPage?page=' + page;
    }
});
</script>
</asp:Content>

工作正常，但在首次加载时总会出现以下情况

在调整浏览器窗口大小或重新加载此页面之前：

你能帮个忙吗

---

谢谢。

您可以参考以下的源代码：

---

希望有帮助。

如何在首次加载时修复此情况？