参考网站：
各种优秀插件：http://www.w3cplus.com/resources/create-dynamic-grid-layouts-like-pinterest.html
masonry.js官网 http://masonry.desandro.com/
query.infinitescroll.js滚动官网 http://www.infinite-scroll.com/
blog: http://css100.net/247.html
http://www.wufangbo.com/?s=%E7%80%91%E5%B8%83%E6%B5%81
http://www.niumowang.org/javascript/jquery-masonry/
瀑布流排版-jquery.masonry.min.js使用说明 http://blog.csdn.net/axer0811/article/details/8966375
无限滚动条-jquery.infinitescroll.js使用说明 http://blog.csdn.net/axer0811/article/details/8965872
瀑布流与无限滚动条一起使用，双剑合璧 http://blog.csdn.net/axer0811/article/details/8968364
瀑布流
注：jquery.masonry.js 和 masonry官网的 masonry.pkgd.min.js 有区别,参数写法不同。 经测试masonry.pkgd.min.js貌似不支持ie6，jquery.masonry.js支持ie6.
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>瀑布流</title> <meta name="Keywords" content=""> <meta name="Description" content=""> <style type="text/css"> body{background:#888;} img{border:0;} .all{ width: 980px;padding-top: 10px;overflow: hidden;margin:0 auto; } .all{ width: 980px;overflow: hidden;margin-top: 10px;margin-bottom: 20px; } .all ul{ width: 980px;overflow: hidden; } .all ul li{ overflow: hidden;background: #fff;width: 230px;margin-bottom: 13px; } .all ul li a{ width: 230px;display: block;text-align: center;overflow: hidden;white-space: nowrap;font-size: 14px;font-weight: bold;color: #444; } .all ul li a:hover{ color: #e903d5; } .all ul li img{ width: 230px;display: block;margin-bottom: 8px; } .all ul li p{ padding: 6px 12px 10px;line-height: 20px;color: #666; } </style> </head> <body> <!--all--> <div class="all"> <ul id="container"> <li class="cell"> <a href=""><img src="http://www.5wants.cc/WEB/File/U3325P704T93D1661F3923DT20090612155225.jpg" alt="">周迅天雷滚滚的[杀马特]发型</a> <p>沙宣邀请周迅拍摄造型大片，演绎从代表几何主义发型的“五点式”到浪漫嬉皮“面纱“再到狂野朋克“Kabuki”经典发型，雷人还是前卫，你怎么看？</p> </li> <li class="cell"> <a href=""><img src="http://img6.3lian.com/c23/desk2/8/30/015.jpg" alt="">周迅天雷滚滚的[杀马特]发型</a> <p>沙宣邀请周迅拍摄造型大片，演绎从代表几何主义发型的“五点式”到浪漫嬉皮“面纱“再到狂野朋克“Kabuki”经典发型，雷人还是前卫，你怎么看？</p> </li> <li class="cell"> <a href=""><img src="http://pic3.nipic.com/20090624/1736432_095154043_2.jpg" alt="">周迅天雷滚滚的[杀马特]发型</a> <p>沙宣邀请周迅拍摄造型大片，演绎从代表几何主义发型的“五点式”到浪漫嬉皮“面纱“再到狂野朋克“Kabuki”经典发型，雷人还是前卫，你怎么看？</p> </li> <li class="cell"> <a href=""><img src="http://pic4.nipic.com/20091118/3047572_163357006682_2.jpg" alt="">周迅天雷滚滚的[杀马特]发型</a> <p>沙宣邀请周迅拍摄造型大片，演绎从代表几何主义发型的“五点式”到浪漫嬉皮“面纱“再到狂野朋克“Kabuki”经典发型，雷人还是前卫，你怎么看？</p> </li> <li class="cell"> <a href=""><img src="http://pic16.nipic.com/20110918/3695685_111553630159_2.jpg" alt="">周迅天雷滚滚的[杀马特]发型</a> <p>沙宣邀请周迅拍摄造型大片，演绎从代表几何主义发型的“五点式”到浪漫嬉皮“面纱“再到狂野朋克“Kabuki”经典发型，雷人还是前卫，你怎么看？</p> </li> <li class="cell"> <a href=""><img src="http://pic12.nipic.com/20110106/5333434_211406155000_2.jpg" alt="">周迅天雷滚滚的[杀马特]发型</a> <p>沙宣邀请周迅拍摄造型大片，演绎从代表几何主义发型的“五点式”到浪漫嬉皮“面纱“再到狂野朋克“Kabuki”经典发型，雷人还是前卫，你怎么看？</p> </li> <li class="cell"> <a href=""><img src="http://img.tom61.com/down/bizhi/099/04.jpg" alt="">周迅天雷滚滚的[杀马特]发型</a> <p>沙宣邀请周迅拍摄造型大片，演绎从代表几何主义发型的“五点式”到浪漫嬉皮“面纱“再到狂野朋克“Kabuki”经典发型，雷人还是前卫，你怎么看？</p> </li> <li class="cell"> <a href=""><img src="http://pica.nipic.com/2007-07-19/20077191851181_2.jpg" alt="">周迅天雷滚滚的[杀马特]发型</a> <p>沙宣邀请周迅拍摄造型大片，演绎从代表几何主义发型的“五点式”到浪漫嬉皮“面纱“再到狂野朋克“Kabuki”经典发型，雷人还是前卫，你怎么看？</p> </li> <li class="cell"> <a href=""><img src="http://pic16.nipic.com/20110820/4725838_184614929000_2.jpg" alt="">周迅天雷滚滚的[杀马特]发型</a> <p>沙宣邀请周迅拍摄造型大片，演绎从代表几何主义发型的“五点式”到浪漫嬉皮“面纱“再到狂野朋克“Kabuki”经典发型，雷人还是前卫，你怎么看？</p> </li> </ul> </div> <!--all end--> </body> </html> <script type="text/javascript" src="js/jQuery.v1.8.3-min.js"></script> <script type="text/javascript" src="js/jquery.masonry.min.js"></script> <script type="text/javascript" > $(function(){ //瀑布流 var $container = $('#container'); // initialize $container.masonry({ columnWidth: 243, itemSelector: '.cell', isAnimated:true }); // initialize Masonry after all images have loaded $container.imagesLoaded( function() { $container.masonry(); }); }) </script>
图片高度BUG修正：
由于网络传输的速度问题，当浏览器加载了dom，但是img图片还没有加载完毕，这个插件在计算图片高度和定位的时候，就会出错，在firefox和chrome中最为明显，尤其是google chrome.
原因：
在chrome浏览器下测试，在图片加载过程中，img的宽度和高度均为0，而在IE下，则浏览器先给img设定了宽度和高度，所以这个插件在IE下使用正常，但在chrome会出错。而这个插件看了官方的image demo也是如此，box层并没有动态生成一个高度值把布局撑开。
解决办法就是先让所有的图片加载完毕，才执行一次masonry()方法。
代码如下：
<script> var $img=$('.container img'); var imgCount=$img.length; $img.load(function(){ imgCount--; if(imgCount==0){$('.container').masonry();} }); </script>
var $container = $('#container'); $container.imagesLoaded( function(){ $container.masonry({ itemSelector : '.cell' }); });
当然了，这样子的话，在加载图片的时候，你会先看到图片简单的排列而已，没有砖块瀑布流的效果，只有当所有图片加载完成后才会出现砖块效果。所以，至于以上代码加不加，就要考虑你的网站的访问速度了！
瀑布流的无限加载
结合jquery.infinitescroll.js使用 jquery.infinitescroll.js原理大概就是通过ajax不断请求后面的数据，然后填充到后面
无限滚动条-jquery.infinitescroll.js使用说明 http://blog.csdn.net/axer0811/article/details/8965872
瀑布流与无限滚动条一起使用，双剑合璧 http://blog.csdn.net/axer0811/article/details/8968364
网上找的demo http://pan.baidu.com/s/1ksdEd
本文转自挨踢前端博客园博客，原文链接http://www.cnblogs.com/duanhuajian/p/3465826.html如需转载请自行联系原作者
@挨踢前端
