css瀑布流布局代码(css 瀑布)

本文介绍了瀑布流的布局，介绍了三种可靠的JS方案和N种不可靠的CSS方案。有一定的参考价值，有需要的朋友可以参考，希望对大家有所帮助。

本着实用精神，让我们今天分享一下瀑布流布局（昨天有个小兄弟问我怎么做，我找了很久没找到，啊原来写在内网上了）。

演示地址: http://www.lilnong.top/static/html/waterfall.html

瀑布流的布局是什么？

比如说 花瓣网、蘑菇街 (我下面的贴图)， 这些网站在显示内容时使用瀑布流布局。

我们也想做一个展示我们的设计稿（定宽，不定高）在页面上，瀑布流是一个很好的方案。

瀑布流布局的核心是基于网格布局，瀑布流布局的核心是基于网格布局每行包含的项目列表高度是随机的（随着其内容的动态变化），每个项目列表以堆栈的形式排列。最重要的是，堆栈之间没有多余的间距。让我们看看上面的瀑布流布局。

网站	蘑菇街	花瓣网	京东	VV
截图
方案	分通道	absolute

grid、inline、float 魔性方案

也算是纯 CSS 方案，本质上是依赖文档流，从左到右，从上到下。

方案	grid	inline	float	bootstrap-grid
截图

可见文档流布局中有非常明显的文档流布局行这个概念，当一行被打开时，就会留下空白，行与行不会重叠。在这里。最神奇的是 float 布局了。

DOM 结构

div.list     // 设置 gird 或者 block，注意清除浮动
  div.item   // 设置为 inline 或者 float，使其能流动
    img      // 宽度设置、高度自适应、间距等。

grid 方案说明

.wrap-waterfall--grid img{vertical-align: top;width: 100px}
.wrap-waterfall--grid .list{
    display: grid;
    grid-gap: 10px;
    /* 可见，网格的大小，占据位置需要提前设置 */
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(50px, auto);
}

grid 在某些情况下会比较 flex 使用方便。例如，需要突破行限制，但只适用于固定布局，如下图所示的布局，如果不使用grid，您会如何实现？

网传有 gird 实现瀑布流布局的方案，但我看到了几个，要么是色块，要么是图片变形，要么是裁剪，方案是使用的 nth-child 定高，太恐怖了吧。

columns、flex CSS实现 不靠谱方案

也是纯 CSS 与上述方案相比，方案已经可以接受，但仍存在一些问题。

• 顺序是先垂直，后水平
• （columns）兼容性问题
• （flex）需要给出一个固定的高度，就会出现超出设定列，而且不能充满设定列。

方案	columns	flex
截图

columns 方案

自然支持，只需要为父级设置即可 columns: 4; column-gap: 6px; 。

flex 方案

flex-flow: column wrap;height: 2300px; 默认情况下是水平排列，通过修改为垂直排列，允许换行，然后通过固定高度使内容换行。

absolute、通道 高度计算方案 靠谱方案

方案	absolute	取余分通道	计算高度分通道
头部截图

这里的方案就是靠谱起来了，能满足我们的使用要求。

让我们回忆一下我们的需求：展示一些内容，内容有特点定宽，不定高。不确定高度一般是由内容长度或高度不一致引起的，常见内容分为两种文字和图片。

• 在没有异步字体的情况下，可以理解为同步可以获得盒子的高度。

• 如果是图片，因为加载是异步的，所以盒子的真实高度也是异步的。但这里一般分为两种情况

• 如果没有高度，则可以通过onload监控图片加载完成。等图片加载完成后再去获取高度。

• 有高度，这种方案通常用于封面图片或文章，上传图片时保存原始图片的大小。此时，我们可以直接使用现有的数据。

获取图片高度

// 用于获取图片的真实高度
naturalHeight: 1180
// 用于获取图片的真实宽度
naturalWidth: 1200

///用户获取当前图片的渲染高度(将接受) css 影响）
height: 98
///用户获取图片当前渲染宽度(将接受) css 影响）
width: 100

// 可返回浏览器是否已完成图像加载。如果加载完成，则返回 true，否则返回 fasle。如果加载完成，则返回 true，否则返回 fasle。
complete 属性
// 可以监控图片加载完成的动作
onload

基于以上内容，我们可以先判断 complete 属性，

function getImageSize(img){
    if(img.complete){
        return Promise.resolve({
            naturalHeight: img.naturalHeight,
            naturalWidth: img.naturalWidth,
            height: img.height,
            width: img.width,
        })
    }else{
        return new Promise((resolve, reject)=