jQuery实现瀑布流布局详解（PC和移动端）

瀑布流布局已成为当今非常普遍的图片展示方式，无论是PC还是手机等移动设备上。这种布局图片的样式大概分为三种：等高等宽、等宽不等高、等高不等宽，接下来我们就最为普遍的等宽不等高形式来作为示例。

我们用百度图片作为范例：

这就是PC端比较常见的瀑布流布局方式，接下来我们审查下元素看看百度图片里面是如何布局：

可以看到，它里面实际是若干个等宽的列容器，通过计算将图片push到不同的容器里。而本文介绍的展示方法是通过定位的方式，虽然最后布局展示的方式不同，但之前的算法都比较类似。

动手

首先我们将如下样式的若干个单元写进body中，并将“box”向左浮动：