用Masonry和jQuery.lazyload插件实现网页瀑布流布局

瀑布流布局

我们常能在网上看到很多瀑布流布局的页面，尤其是很多图片网站，例如百度图片。这种最典型的瀑布流布局，每个元素的宽度是固定的，但图片长度各不相同，于是通过下图这种样子竖着排列了下来，达到了最大的页面空间利用率。

因为对前端开发不了解，一开始为了找到这种布局叫什么名字也是花了我好久时间o(╯□╰)o

瀑布流布局不局限于等宽布局，例如下面这种形式也可以，来自Masonry官网截图。

Masonry官网 http://masonry.desandro.com/

瀑布流布局作为一种响应式布局，网页元素会自动根据页面宽度进行调整。按住Ctrl键并滚动鼠标滚轮，对网页进行缩放，我们就能看到网页元素之间的排版位置会不断变化，如上图所示。

瀑布流布局实现

对于上面的等宽瀑布流布局，看起来其实似乎很容易实现。但是由于HTML文档流的原理，网页元素的排列是先从左往右的，超出了才会换行，而不能直接控制成从上往下，因此直接利用HTML和CSS不太好处理，完美的瀑布流布局需要借助javascript或jQuery插件实现。这里说的不是很清楚，可以看下文中详细的图文解释。瀑布流布局的实现有很多种方式，这篇文章写得也很详细。

瀑布流布局浅析 http://ued.taobao.org/blog/2011/09/waterfall/

Masonry插件

Masonry插件是用的比较多的瀑布流布局插件。下面两张图展示了插件使用前后的网页布局，很容易看出其作用。

没使用Masonry时，网页元素按照HTML文档流排列，先从左到右，超出再换行，中间会有很多空隙，如下图所示。

使用了<