jQuery插件实现瀑布留布局masonry + infinitescroll 图片高度处理

jQuery插件实现瀑布留布局masonry + infinitescroll 。使用官方的示例代码实际测试发现，当上传到服务器的时候，由于图片下载速度问题，导致图片高度不能被正确识别，从而造成层的重叠。解决方法就是使用imagesLoaded加载。

    var $container = $('#flow');

    $('#flow').imagesLoaded(function(){

        $('#flow').masonry({

            itemSelector: '.box',

            gutterWidth: 20,

            columnWidth: 238

        });

    });

这样解决了第一次加载时候的问题，但是当异步请求之后加载的图片仍然无法正确的获取高度，解决的办法就是先将下载的图片隐藏，等图片下载完毕后再使用masonry渲染。代码如下：

    $('#flow').infinitescroll({

        loading     : {

            msgText        : "<em>正在加载</em>",

            img: "http://www.infinite-scroll.com/loading.gif",

            finishedMsg : "<em>木有了哦...</em>"

        },

        navSelector : "#plist",

        nextSelector: "#plist a",

        itemSelector: ".box",

        pixelsFromNavToBottom: 100,

        animate: true

    },function(newElements) {
　　　　　//先隐藏

        var $newElems = $( newElements ).css({ opacity: 0 });

        $newElems.imagesLoaded(function(){
　　　　　　//图片显示后再进行masonry渲染

          $newElems.animate({ opacity: 1 });

          $container.masonry( 'appended', $newElems, true );

        });

    });

这样就很好的解决了图片加载的问题。

巴特西

jQuery插件实现瀑布留布局masonry + infinitescroll 图片高度处理

最新文章

热门文章