请记住我们的网址:3zcode.com。也就是“三只源码"

瀑布流插件masonry与图片延迟插件结合使用

教程 admin 1944℃ 0评论

一个图片列表网站,图片的高宽都不固定,要较友好的呈现方式,就想到了瀑布流布局。

选来选去,选中了jquery.masonry。官方网站:http://masonry.desandro.com/

使用方法相当简单,重要的是指定元素的宽度。

var msnry=$(‘.post-list’).masonry({
itemSelector: ‘.post-item’,
columnWidth: itemWidth, //itemWidth 是依据屏幕宽度动态计算的元素的宽度
gutter:10,
resize:true
});

其他,和图片延迟加载插件结合。

延迟加载插件jquery.lazyload,在以前的文章中有提过。点击查看jquery.lazyload详细

先说说思路,两者结合,一个是根据宽高来布局的,一个是用来加载图片的。他们两者的联系是:只有图片加载完成后才能得到宽和高,才能进行瀑布流布局。所以我们需要在lazyload加载完成的回调函数中执行瀑布流布局。代码如下:

$(“img.lazy”).lazyload({effect: “fadeIn”,load:function(){
var msnry=$(‘.post-list’).masonry({
itemSelector: ‘.post-item’,
columnWidth: itemWidth,
gutter:10,
resize:true
});
}});

以为这样就完了?确实,实现了我们想要的功能,但有问题。图片加载需要时间,在未加载完成之前,图片列表是没有执行瀑布流布局的,看着杂乱而不友好,那如何是好呢?

再说说思路,不是图片没有加载完成没办法瀑布流布局么,那我们可以先给img一个默认的站位图src,一个长宽10px的png图片。这下图片肯定“秒”加载完成,“秒”完成瀑布流布局,接着我们再执行延迟加载,在图片加载完成事件中,再执行次瀑布流布局。代码如下。

var msnry=$(‘.post-list’).masonry({
itemSelector: ‘.post-item’,
columnWidth: itemWidth,
gutter:10,
resize:true
});

$(“img.lazy”).lazyload({effect: “fadeIn”,load:function(){
msnry.masonry();
}});

后话,无法预知的是网络环境,就像常走夜路,也不知遇到的那些是人那些是鬼。实现功能后,在恶劣的网络环境中测试执行效果,很有必要。

转载请注明:三只源码 » 瀑布流插件masonry与图片延迟插件结合使用

喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址