jQuery插件实现瀑布留布局masonry + infinitescroll 。 使用官方的示例代码实际测试发现,当上传到服务器的时候,由于图片下载速度问题,导致图片高度不能被正确识别,从而造成层的重叠。 解决方法就是使用imagesLoaded加载。
1 2 3 4 5 6 7 8 | var $container = $( '#flow' ); $( '#flow' ).imagesLoaded( function (){ $( '#flow' ).masonry({ itemSelector: '.box' , gutterWidth: 20, columnWidth: 238 }); }); |
这样解决了第一次加载时候的问题,但是当异步请求之后加载的图片仍然无法正确的获取高度,解决的办法就是先将下载的图片隐藏,等图片下载完毕后再使用masonry渲染。代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | $('#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 ); }); }); |
这样就很好的解决了图片加载的问题。