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

选来选去，选中了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与图片延迟插件结合使用