0

我在我的网站上使用 jQuery 的瀑布插件。我正在使用 jQuery 1.9.1，并且我正在将 Knockout.js 用于我的 js 视图模型。数据来自对 Web api 服务的 ajax 调用，该服务将 JSON 对象返回到淘汰视图模型。这些图像都是天蓝色存储容器中的 blob。

瀑布插件主页

正如 OP 在这个 SO question中指出的那样，我以下列方式初始化插件：

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

});

但同样的问题也存在。

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

问题

有人可以帮我在所有 imgaes 加载后启动这个瀑布插件。

提前致谢。

更多细节：

这是我的 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 重复中包含了第一个元素）：

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

1 回答 1

0

看起来有点复杂，这里我们有一个非常简单的选项：bootstrap-waterfall，强烈推荐。

于 2015-07-01T02:41:30.627 回答