网页上的摄影展:等高响应布局来实现
「等高响应式布局」是什么？介绍它之前，我们先回忆一下它的近亲「等宽响应式瀑布流」。
回忆一下，Pinterest、Google+、花瓣网、美丽说等是否让你沉浸于不断往下拉体验丰富的图片阅览？
那种感觉就像逛街，让所有商品呈现在网页上，只需要往下拉鼠标就能逐个浏览，不断加载，他们简洁同时整齐，原因是他们的宽度相等，但是高度不一。
这就是所谓的「等宽响应式瀑布流」，它的特点如下：
1.响应式设计，适应PC端以及移动端各设备呈现不同的宽度和单列数量；
2.等宽，这样的布局十分适合瀑布流，有不断向下的阅读感；
3.没有脚的小鸟，因为内容是不断向下加载，因此页脚基本是看不到了；
这样的布局引起了一个风潮，然而把图片适应到等宽，高度等比例变化，对不考虑容器高度的浏览来说实现并不难，因此业界也大多采用了这样的布局，而且可以响应式，在不同屏幕宽度可以变化不同卡片宽度。
然而，回归正题，今天要说的和这个不同，但是相近，它就是「等高响应式布局」。
先看看效果图：
如图，并不像等宽一样简单，要在不改变图片分辨率(宽高比)同时保持等高且占满行宽度，如何实现？不妨带着问题跟我走。
1 等高响应式布局是什么？
①行内高度相等；
②行间总宽度相等；
③自适应宽度布局；
④图片分辨率（宽高比）不变；
2 难在那里？
①行内高度一致，行间高度不一致，但是相差不能太多；
②并不知道一行需要多少个图片才能占满宽度，由于高度不确定，图片的宽度也不能等比变化；
③如何做到自适应？
④布局用于用户的个人相册，数据量是有限且未知的，如何保证图片数量满行显示？
由上可知，这种布局涉及太多变量，而且最难的是做到图片分辨率不改变，不影响图片质量效果。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
