jquery 瀑布插件的等待，直到图像加载不起作用

Question

我在我的网站上使用jQuery的瀑布插件。我使用的是jQuery 1.9.1，我的js视图模型使用的是Knockout.js。数据来自对web api服务的ajax调用，该服务将JSON对象返回到敲除视图模型。这些图像都是azure存储容器中的斑点。

瀑布插件主页

正如OP在这个SO问题中所示，我以以下方式初始化插件：

$(window).load(function () {
    // apply jQuery Waterfall plugin
    $("#ProductList").waterfall({
        colMinWidth: 230,
        defaultContainerWidth: 970,
        autoresize: true
    });
    $('#ProductList').load(function () {
        $("#ProductList").waterfall('reflow');
    })
});

我使用window.load函数是因为据我所知，它会等待所有Dom元素加载。

问题：

但是，当网站第一次加载时，在没有缓存的情况下，瀑布插件无法正确渲染（因为对象大小没有应用于页面，因此它们重叠，并且页面高度对所有页面对象来说都太短）。但是，如果我刷新页面，瀑布插件会在第一次页面加载后正确地呈现每个页面请求。

我还尝试将这个瀑布初始化放在以下页面函数中：

$(document).ready(function ()
});

但同样的问题也存在。

谷歌chrome开发工具没有在页面上显示任何js错误。

问题

有人能帮我在所有imga加载后启动这个瀑布插件吗。

提前谢谢。

更多详细信息：

这是我的knockout.js HTML模板：

<div id="ProductList" class=""
    data-bind="template: {
    foreach: filterProducts,
    beforeRemove: hideProductElement,
    afterAdd: showProductElement,
    afterRender: reFlow
}">
    <div>
        <input type="hidden" data-bind="text: ProductId">
        <div class="kr_pr_box">
            <%-- BANNER PANEL--------------------------------------------------------------------------------------------------  --%>
            <div data-bind="if: StatusName">
                <div class="kr_pr_box_banner_box">
                    <span id="dnn_BannerLable" class="kr_pr_box_banner" data-bind="text: StatusName"></span>
                </div>
            </div>
            <%-- IMAGE PANEL-------------------------------------------------------------------------------------------------- --%>
            <a data-bind="attr: { href: DetailUrl }" title="View Full Detail">
                <img data-bind="attr: { src: Url300 }">
            </a>
            <%-- TITLE PANEL-------------------------------------------------------------------------------------------------- --%>
            <div class="kr_pr_box_detail">
                <a data-bind="attr: { href: DetailUrl }" title="View Full Detail">
                    <label data-bind="text: Name"></label>
                </a>
                <label data-bind="text: ShortInfo" class="kr_pr_box_caption"></label>
            </div>
            <%-- PRICE PANEL-------------------------------------------------------------------------------------------------- --%>
            <label data-bind="text: formatCurrency(Price)" class="kr_pr_box_price"></label>
            <%-- CART PANEL-------------------------------------------------------------------------------------------------- --%>
            <div class="kr_pr_box_addcart">
                <asp:HyperLink runat="server" ID="CartLink" ToolTip="Add to Cart" NavigateUrl="~/ModuleDevelopment/KrisisStore.aspx">
                        <i class="fa fa-shopping-cart"></i>
                </asp:HyperLink>
            </div>
            <%-- EDIT / DELETE PANEL -------------------------------------------------------------------------------------------------- --%>
            <asp:Panel ID="AdminPanel" runat="server" Visible="false">
                <div class="kr_pr_box_admin">
                    <asp:HyperLink ID="lnkEdit" runat="server" ResourceKey="EditProduct.Text" Visible="false" Enabled="false" />
                    <asp:LinkButton ID="lnkDelete" runat="server" ResourceKey="DeleteProduct.Text" CommandName="DeleteProduct" ToolTip="Add to Cart" CommandArgument='<%# Eval("ProductID")%>' />
                </div>
            </asp:Panel>
        </div>
    </div>
</div>

HTML就是这样呈现的（为了简洁起见，我只在ko repeat中包含了第一个元素）：

<div id="ProductList" class="" data-bind="template: {
    foreach: filterProducts,
    beforeRemove: hideProductElement,
    afterAdd: showProductElement,
    afterRender: reFlow
}" style="position: relative; min-height: 1112px;">
<div style="position: absolute; width: calc(25% - 0px); transform: translate3d(calc(0% + 0px), 0px, 0px);">
        <input type="hidden" data-bind="text: ProductId"></input>
        <div class="kr_pr_box">
            <div data-bind="if: StatusName"></div>

            <a data-bind="attr: { href: DetailUrl }" title="View Full Detail" href="http://www.dnndev.me/Module-Development/Krisis-Store/ctl/Detail/mid/2601/id/17/item/Test-Product-62">
                <img data-bind="attr: { src: Url300 }" src="https://giselledenis.blob.core.windows.net/products/product-name-Medium300.jpg">
            </a>
            <div class="kr_pr_box_detail">
                <a data-bind="attr: { href: DetailUrl }" title="View Full Detail" href="http://www.dnndev.me/Module-Development/Krisis-Store/ctl/Detail/mid/2601/id/17/item/Test-Product-62">
                    <label data-bind="text: Name">Test Product 62</label>
                </a>
                <label data-bind="text: ShortInfo" class="kr_pr_box_caption">A test product for krisis store</label>
            </div>
            <label data-bind="text: formatCurrency(Price)" class="kr_pr_box_price">$175.00</label>
            <div class="kr_pr_box_addcart">
                <a id="dnn_ctr2601_View_ctl00_CartLink" title="Add to Cart" href="/ModuleDevelopment/KrisisStore.aspx">
                        <i class="fa fa-shopping-cart"></i>
                </a>
            </div>

        </div>
    </div>
</div>

Answer 1

看起来有点复杂，这里我们有一个非常简单的选项：强烈建议使用bootstrap瀑布。