javascript - 初回ロード時のウォーターフォール表示エラー

Question

次のようなウォーターフォール スタイルのページがあります。

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

正常に動作しますが、最初のロード時に常に以下の状況が発生します。

ブラウザ ウィンドウのサイズを変更するか、このページをリロードするまで:

これを手伝ってもらえますか？

ありがとう。