瀑布流的使用

今天做的新闻列表，本来用bootstrap的网格样式来实现，但因为每个新闻的图片大小不一致（图片等宽不等高，按图片原比例缩放），所以每行列表的顶部对齐，底部不对齐，有点奇怪，要求改成瀑布流。

bootstrap 的网格效果在每行的大小都是一样的，这是因为row默认不指定align-items这个样式, 而该样式不指定默认为stretch(拉伸), 因此当第一列将row撑高后, 第二列也会被拉伸, 这种情况给row指定下align-item可以解决, 使用align-item-start/center/end类即可
但是我发现虽然每行的高度不一样了，但是下一行还是会从相同的地方开始排列

最后用masory插件实现瀑布流，主要原理是用js加上绝对定位，用top和left指定位置



最后效果图

纯手写瀑布流参考链接