5.3 非固定列宽的复杂瀑布流
虽然从直观感觉来说非固定列宽的瀑布流算不上用户习惯意义上的瀑布流，但是也有值得研究和使用的地方。
5.3.1 非固定列宽瀑布流的争议
知乎是一个高品质的真实网络问答社区，上面有一些对瀑布流颇有见解的分析和观点。下面摘录一些有关固定列宽的观点，以供大家了解。
● 知乎用户zhaosj说：“瀑布流实际上很吃硬件，翻页我曾经翻到过一百页开外，能想象一百多页的内容用瀑布流全都显示在一个页面里是个什么情形么？”
● 知乎用户Kavin Han说：“页面上的元素会越来越多，导致出现性能问题（也就是说加载多了会卡）。所以，在考虑用户体验的同时怎么控制已经看完的元素和怎么加载新元素是个问题。”
非固定列宽瀑布流当然也是瀑布流，对于固定列宽瀑布流存在的问题同样也是存在的，以下是关于非固定列宽的观点。
● 知乎用户“地球人”说：“这（指非固定列宽瀑布流）还叫‘瀑布流’？这就是个大杂烩！‘瀑布流’布局必须是宽固定、间隙固定、列数固定的，不满足以上几项，就不叫‘瀑布流’! ”
● 知乎用户Sapjax说：“宽高不定的话，答案是无解，不管怎么排列，都会有无法消除的多块空隙。”
● 知乎用户薛滨说：“如果能控制每个碎片的图片高度和文字长度，理论上是有办法解决的，不过这也就不算瀑布流了。瀑布流里的内容如果是静态的，单独写css吧！如果是动态的，要么选择上面的方案（指Masonry, jQuery的非固定和固定列宽瀑布流插件），要么改设计！”
不固定列宽的效果通常如图5-6所示，它有点像CSS雪碧图（CSS Sprites），其算法也类似，它的难点在于空白和位置的计算，这当然是相当消耗内存和CPU的，在老版本IE浏览器下其性能更加不敢恭维。
图5-6 不固定列宽瀑布流效果图
这样的效果可以说没有什么美感，就实战项目而言，恐怕需要在设计上做一些配合或者妥协，否则把这样的东西丢给用户恐怕没有什么意义。
5.3.2 用Masonry实现任意非固定列宽瀑布流
对于非固定列宽瀑布流项目，Masonry是目前业界最完美的解决方案，上手容易且效果精美。下面就用Masonry来制作一个复杂的非固定列宽的瀑布流布局页面。
（1）先去官网https://masonry.desandro.com下载该插件并在页面引用。
<script src="yourpath/masonry.pkgd.js"></script>
（2）构建如【范例5-3】所示的HTML结构。
（3）在页面最后加入下面的代码就可以初始化masonry了。
<script>
var $container = document.getElementById("container");
var msnry = new Masonry( $container, {
columnWidth: 250, //每一列的宽度
itemSelector: '.box' //子元素的选择器，是class 的值
});
</script>
【范例5-3 非固定列宽瀑布流的HTML代码结构】
1. <! DOCTYPE html>
2. <html>
3. <head>
4. <title>非固定列宽瀑布流</title>
5. <style>.box{margin:3px; }</style>
6. </head>
7. <body>
8. <div class="w1000">
9. <div id="container">
10. <div class="box"><img src="1x1a.jpg" /></div>
11. <div class="box"><img src="1x1b.jpg" /></div>
12. <div class="box"><img src="1x3.jpg" /></div>
13. <div class="box"><img src="2x1b.jpg" /></div>
14. <div class="box"><img src="1x1c.jpg" /></div>
15. <div class="box"><img src="1x1d.jpg" /></div>
16. <div class="box"><img src="2x1c.jpg" /></div>
17. <div class="box"><img src="1x1e.jpg" /></div>
18. <div class="box"><img src="1x1f.jpg" /></div>
19. <div class="box"><img src="2x1d.jpg" /></div>
20. </div>
21. </div>
22. </body>
23. </html>
为了实际效果，【范例5-3】代码中那些img图片尺寸也不是完全任意的，它们是成比例的，聪明的读者可以从命名看得出，图5-7的效果更加直观。
图5-7 非固定列宽布局自动排列布局效果
图5-7只是浏览器窗口变化时Masonry自动排列出来的3种效果，代码均在同一个页面。对于初始化Masonry的方法，官方网站还提供了HTML内嵌和jQuery插件调用两种方式，具体请参考官网。
笔者在这里要提醒的是，如果要在IE 6、IE 7等低版本的浏览器下使用这个开源插件，需要用基于jQuery的Masonry v2.1.08版本，本书范例使用的是Masonry v3.0.1版本，在低版本下调用的代码如下：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/ jquery.min.
js"> </script>
<script src="jquery.masonry.min.js"></script>
<script>
var $container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.box'，
columnWidth : 250
});
});
</script>