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

时间:2014-04-30 03:19:01   收藏:0   阅读:459

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

mamicode.com,码迷
    var $container = $(‘#flow‘);
    $(‘#flow‘).imagesLoaded(function(){
        $(‘#flow‘).masonry({
            itemSelector: ‘.box‘,
            gutterWidth: 20,
            columnWidth: 238
        });
    });
mamicode.com,码迷

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

mamicode.com,码迷
    $(‘#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 ); }); });
mamicode.com,码迷

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

jQuery插件实现瀑布留布局masonry + infinitescroll 图片高度处理,码迷,mamicode.com

评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!