瀑布流已经是险些过时的手艺了，不外对于许多想要快速实现它的同伙而言，却绝非易事，由于纵然我们已经有许多现成的代码，却发现在自己的开发环境中 无法快速获得自己想要的效果。就像我们现在要先容的三大利器（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
