之前在做例大祭试听页的时候发现的一个问题:在使用lazyload加载图片时,占位图片与实际图片尺寸比例不同,masonry创建瀑布流布局是以占位图的宽高计算的,所以加载出真实图片时div整体会变长,导致上下重叠。
比如邻人老贼这两张太长了!
因为页面现在是纯静态的,所以无法从后台动态获取响应尺寸信息之类的(
昨天在看lazyload源码的时候注意到它的option里有一个load参数,经过查询发现它是在实际图片加载完毕时回调,正好解决了目前遇到的问题。(官网根本没介绍啊摔)
解决方案很简单,在每张图片完成实际加载之后重新布局,就可以避免出现上面那种重叠的情况。(当然在快速下拉的时候批量加载重新排序对cpu有一点点压力,不过问题不大)
贴一点关键代码:
<script>
$(function(){
reMasonry(); //打开页面首次布局
$("img").lazyload({
effect : "fadeIn",
threshold : 150,
load: reMasonry //图片加载完成重新布局
});
});
function reMasonry(){
var masonryNode = $('#masonry');
masonryNode.imagesLoaded( function(){
masonryNode.masonry({
itemSelector : '.album-card',
gutterWidth : 10,
isFitWidth: true,
isAnimated: true
});
});
};
</script>