首次加载瀑布显示错误

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>

它的工作正常，但在第一次加载时总会出现以下情况，

直到我调整浏览器窗口大小或重新加载此页面：

你能帮忙吗？

感谢。

Answer 1

您可以参考bootstrap-waterfall的源代码：

希望它有所帮助。