Я использую плагин водопада для jQuery на своем сайте. Я использую jQuery 1.9.1, и я использую Knockout.js для моей модели просмотра js. Данные поступают из вызова ajax к службе веб-API, которая возвращает объекты JSON в модель представления нокаута. Все изображения представляют собой капли внутри лазурного контейнера для хранения.

Главная страница плагина Waterfall

Я инициализирую плагин следующим образом, как указывает OP в этот ТАК вопрос:

$(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 ()

});

Но такая же проблема существует.

Инструменты разработчика Google Chrome не отображают на странице никаких ошибок js.

ВОПРОС

Может ли кто-нибудь помочь мне запустить этот плагин водопада после загрузки всех изображений.

Заранее спасибо.

Дальнейшие детали:

Вот мой HTML-шаблон knockout.js:

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