网页上的摄影展:等高响应布局实现(图文)

「等高响应式布局」是什么？介绍它之前，我们先回忆一下它的近亲「等宽响应式瀑布流」。

回忆一下，Pinterest、Google+、花瓣网、美丽说等是否让你沉浸于不断往下拉体验丰富的图片阅览？

那种感觉就像逛街，让所有商品呈现在网页上，只需要往下拉鼠标就能逐个浏览，不断加载，他们简洁同时整齐，原因是他们的宽度相等，但是高度不一。

这就是所谓的「等宽响应式瀑布流」，它的特点如下：

1.响应式，适应PC端以及移动端各设备呈现不同的宽度和单列数量；

2.等宽，这样的布局十分适合瀑布流，有不断向下的阅读感；

3.没有脚的小鸟，因为内容是不断向下加载，因此页脚基本是看不到了；

这样的布局引起了一个风潮，然而把图片适应到等宽，高度等比例变化，对不考虑容器高度的浏览来说实现并不难，因此业界也大多采用了这样的布局，而且可以响应式，在不同屏幕宽度可以变化不同卡片宽度。

然而，回归正题，今天要说的和这个不同，但是相近，它就是「等高响应式布局」。