Masonry与LazyLoad组合使用导致节点重叠的解决办法

  之前在做例大祭试听页的时候发现的一个问题:在使用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>
发表评论