帶跨度標記的砌塊或嵌入式塊

Question

在我的網頁中，砌體的第二項itemSelector無法按要求工作...

我嘗試使用span標簽將其打斷，但沒有成功。 它正確顯示了前10張圖片，但使用向下滾動時，它會在一個塊中加載下一張所有圖片。

現場示例http://www.bhinderblink.com/

我的項目是使用中繼器和jquery從數據庫中獲取圖片名稱。 前10個直接使用ASP轉發器加載，下一個加載同時使用向下滾動和pic在Div #imageDiv中加載，jquery .append從xml對象獲取數據。

腳本代碼

 function OnSuccess(response) {
        var xmlDoc = $.parseXML(response.d);
        var xml = $(xmlDoc);

        pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());

        var pic_infoVar = xml.find("pic_info");

        pic_infoVar.each(function () {
            var customer = $(this);
            $("#imageDiv").append("<span class='inline'><img id='theImg' src='/pic/jas/" + customer.find("pic_name").text() + ".jpg" + "'/></span>");

        });
        $("#loader").hide();
    }

身體代碼

<form id="form1" runat="server">
<div id="topBanner">
</div>
<div id="container">
    <asp:Repeater ID="rptCustomers" runat="server">
        <HeaderTemplate>
        </HeaderTemplate>
        <ItemTemplate>
            <div class="box">
                <asp:Image ID="zzz" runat="server" ImageUrl='<%# "~/pic/jas/" + Eval("pic_name") + ".jpg" %>' />
            </div>
        </ItemTemplate>
        <FooterTemplate>
        </FooterTemplate>
    </asp:Repeater>
        <div class="box">
            <div id="imageDiv">
        </div>
    </div>
</div>
<img id="loader" alt="" src="loading.gif" style="display: none" />
</form>

Answer 1

您需要使用砌體重新加載功能，以便它可以計算新元素的大小； 類似於.masonry（'reload'）;