首先我们看一下，什么是瀑布流的布局，用一张图片就能更容易的理解。
可以看到，图片上的图片等列的显示，都是不等高的，对于这种像流水一样的布局，可以称为瀑布流的布局，对于不同大小的图片，这种布局方式是一种不错的选择。
今天我们使用一种js插件，waterfall-js插件，我们只要传入我们要展示的图片列表信息，它可以很快的计算出我们要展示的图片大小，并将图片的大小数据等返回给我们，这样我们只需要修改展示的样式。
来看看如何使用这个插件？
<!-- 首先需要引入js插件 --> <script src="./waterfalljs.js"></script>
var columnCount = 3;
var windowWidth = window.innerWidth
var fall = new Waterfalljs({
width: windowWidth,
defaultHeight: 120,
async: true,
columnCount: columnCount,
extHeight: 25,
padding: {
left: 10,
right: 10,
top: 10
},
itemGapH: 10,
itemGapV: 10
})
var isLoading = false
fall.on('load', function(boxItem, index) {
// boxItem中包含了一个图片的单个数据信息
})
fall.on('end', function(list) {
// list 包含了所有图片的数据信息
// load和end回调，看情况使用
})
imgList = [
{
"src": "图片地址",
"w": 500,
"h": 200
},
{"src": "图片地址",},
{"src": "图片地址",}
]
fall.load(imgList)具体详细的使用方法，可以参考文档