当我的页面加载第一次砌体重叠图像,如果我刷新页面,它开始工作良好。我不知道我做错了什么。我的网页链接是这个www.bhinderblink.com
<script type="text/javascript">
$(window).load(function () {
$('#container').masonry({
// options
itemSelector: '.box',
columnWidth: 240,
isAnimated: true,
isFitWidth: true,
animationOptions: {
duration: 650,
easing: 'linear',
queue: false
}
});
});
</script>
.ajax成功时,从xmlobject中获取数据…
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);
//...........
var $picString = $("<div class='box'><img id='theImg' src='/pic/jas/" + customer.find("pic_name").text() + ".jpg" + "'/><div>Detail2</div></div>");
$("#container").append($picString).masonry('appended', $picString, true);
});
$("#imgloader").hide();
$("body").css({ "opacity": "100" });
}
我也有类似的问题,图像在第一次加载时重叠。我通过首先加载图片。
$(".id").imagesLoaded(function(){
$('.id').masonry({
itemSelector: '.scrapcontent',
columnWidth: 3,
isAnimated:true,
animationOptions: {
duration: 700,
easing:'linear',
queue :false
}
});
}
如果图像被加载,那么只有你的砌体的责任必须开始。
这是因为在内容(图像)未完全加载之前脚本正在运行。因此产生了定位误差。
试试这个:-
<head>
<script>
$(window).load(function(){
$('#selector').masonry({
itemSelector : '.item',
columnWidth : 200,
isAnimated: true,
animationOptions: {
duration: 700,
easing: 'linear',
queue: false
}
});
});
</script>
</head>