jQuery插件实现瀑布留布局masonry + infinitescroll 图片高度处理
2020-11-15 03:06
标签：com http blog style class div img code java javascript log jQuery插件实现瀑布留布局masonry + infinitescroll 。
使用官方的示例代码实际测试发现，当上传到服务器的时候，由于图片下载速度问题，导致图片高度不能被正确识别，从而造成层的重叠。
解决方法就是使用imagesLoaded加载。 这样解决了第一次加载时候的问题，但是当异步请求之后加载的图片仍然无法正确的获取高度，解决的办法就是先将下载的图片隐藏，等图片下载完毕后再使用masonry渲染。代码如下： 这样就很好的解决了图片加载的问题。 jQuery插件实现瀑布留布局masonry + infinitescroll 图片高度处理,搜素材,soscw.com jQuery插件实现瀑布留布局masonry + infinitescroll 图片高度处理 标签：com http blog style class div img code java javascript log 原文地址：http://www.cnblogs.com/aleafo/p/3695816.html
var $container = $(‘#flow‘);
$(‘#flow‘).imagesLoaded(function(){
$(‘#flow‘).masonry({
itemSelector: ‘.box‘,
gutterWidth: 20,
columnWidth: 238
});
});
$(‘#flow‘).infinitescroll({
loading : {
msgText : "正在加载",
img: "http://www.infinite-scroll.com/loading.gif",
finishedMsg : "木有了哦..."
},
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 );
});
});
上一篇：JS 基础
下一篇：Js获取当前日期时间及其它操作
文章标题：jQuery插件实现瀑布留布局masonry + infinitescroll 图片高度处理
文章链接：http://soscw.com/index.php/essay/21363.html