在我的网页中,masonry 的第二项 itemSelector 没有按要求工作...
我尝试使用 span 标签将其分解成 block 但没有成功。它正确显示了前 10 张图片,但是当使用向下滚动时,它会在一个 block 中加载接下来的所有图片。
实例 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>
最佳答案
你需要使用masonry reload函数,这样它才能计算出新元素的大小;类似 .masonry('reload');
关于javascript - 带有 span 标签的砖石 block 或内联 block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14020197/