瀑布流适合图片多的页面，当然也适合我的速查表页面，这里简单使用css实现一个瀑布流布局。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;}.content {-moz-column-count: 3;-webkit-column-count: 3;column-count: 3;-moz-column-gap: 1em;-webkit-column-gap: 1em;column-gap: 1em;}.item {height: 60px;padding: 0em;margin-top: 1em;-moz-page-break-inside: avoid;-webkit-column-break-inside: avoid;break-inside: avoid;border: 1px solid #000;background: #909090;}.item:first {margin-top: 0;}.h100 {height: 100px;}.h200 {height: 200px;}</style></head><body><div class="content"><div class="item"></div><div class="item"></div><div class="item h100"></div><div class="item"></div><div class="item h200"></div><div class="item h100"></div><div class="item h100"></div><div class="item h100"></div><div class="item h100"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div></body></html>
其中请关注3句css
column-count: 4; //想要分割的列数column-gap: 10%; //每列的边距break-inside: avoid;// auto 指定既不强制也不禁止元素内的页/列中断。// avoid 指定避免元素内的分页符。// avoid-page 指定避免元素内的分页符。// avoid-column 指定避免元素内的列中断。// avoid-region 指定避免元素内的区域中
