masonry+imagesloaded+infinitescroll三大jQuery插件实现瀑布流无限图片懒加载效果

瀑布流已经是几乎过时的技术了，不过对于很多想要快速实现它的朋友而言，却绝非易事，因为即使我们已经有很多现成的代码，却发现在自己的开发环境中 无法快速得到自己想要的结果。就像我们现在要介绍的三大利器（masonry+imagesloaded+infinitescroll）即使它们是如此 有效，却在马上要使用的时候让我们拿着如烫手山芋班很难真正达到我们想要的效果。

下面，我们从其原理来讲解它们的使用，以帮助你更好的发挥它的功效。但为了快速实现，我们不讲解它们的全部内容。

1. 合理的HTML布局是问题的基本

<div id="container">
  <div class="item">...</div>
  <div class="item w2">...</div>
  <div class="item">...</div>
  ...
</div>
<div id="page-navi">...</div>

注意：上面的#container和#page-navi被分开，#container的任务就包含瀑布流列表，翻页的工作交给#page-navi来完成。不少案例中，#container内的结构不规律，有一些杂项，甚至把#page-navi也放在里面，这是导致后面处理中出错的根源。

2. 存在图片时masonry+imagesloaded搭配使用

在一些案例里面小白按照官网上给出的代码进行布局，结构发现图片重叠在了一起，于是小白慌张了，觉得是不是插件冲突啊，不可能官方代码也存在问题吧！是的，官方代码存在问题，因为小白没有读完官方的介绍，单纯看一小段代码就会有这个问题。

在图片出现在.item中时，我们必须等到图片加载完成再来执行masonry，否则masonry会按照图片还没加载的高度来给.item赋予高度，这结果可想而知，就是错乱感。

而使用imagesloaded则可以避免这种情况，imagesloaded会检查#container中的图片是否加载完成，只有当图片都加载 完了，才会执行回调中的代码。所以，如果小白要想在存在图片的时候实现瀑布流，就必须等到图片加载完了再来使用masonry。当然，有些人不用 imagesloaded，他们牛皮哄哄的使用window.load，但是这样的话会等很久很久，假如网速慢，图片加载了半天没有加载完，瀑布流就永远 不会出来。所以，我在使用代码的时候都是这样使用的：

$('#container').imagesLoaded( function() {
	new Masonry( document.getElementById('container'),{itemSelector:'.item'} );
});

这种用法非常奇怪，官方说你可以用jQuery的方法啦，可以用

$('#container').masonry({itemSelector:'.item'});

就可以啦但是你要这样思考，jQuery的$()是即时获取，一个node加载好就马上获取的，这可不是什么好事，就像ready和load一样有的时候ready好了，但是还没有load，这就是图片的情况！图片ready就是加载一个<img>标签，秒秒钟的事，但是要load却要花大把的时间和流量才行。

而如果你的列表中全部都是文字，那么就不用考虑这些了，因为文字真的就是ready可以完成的事。

3.让infinitescroll执行完，获得加载完的节点

小白在使用infinitescroll的时候着急的很，希望马上就能无限拖了，但是有一个非常严肃的问题就是，你必须等到要加载的所有的内容都加 载还了，甚至加载过来的图片也已经搞定了，才开始行动。就像上面那段代码一样，如果你加载过来了一堆图片，但是图片还没有load，仅仅是ready好 了，你就开始执行masonry，那么重新加载masonry就会因为从后面一页抓取的图片还没有load，而无法确定.item的高度，最后有可能让这 些新加载的.item跑到#container的顶部。我想这个情况绝大部分的小白都遇到过。

如果你深刻理解了这里，你就会觉得上面那段短短的，看上去奇怪的代码，是多么精妙。

把它放在infinitescroll的执行完回调函数中。

$('#container').infinitescroll({
	navSelector : '#page-navi',
	nextSelector : '#page-navi a.next',
	itemSelector : '#container .item'
	// .. 省去了其他参数
},function(arrayOfNewElems){
	$(arrayOfNewElems).appendTo('#container');
	$('#container').imagesLoaded( function() {
		new Masonry( document.getElementById('container'),{itemSelector:'.item'} );
	});
	// .. 省去了其他动作
});

这样的一个逻辑就非常清晰了。

当然了，在infinitescroll中还有一个this比较难把握。我们虽然获得了arrayOfNewElems，但是没有获取整个DOM。官方提示这个时候this就是获取的整个DOM，但又马上提示1.5版本之后this仅仅是获取的DOM中的#container，让人有些纳闷。

官方地址：infinitescroll masonry imagesloaded