网页布局案例

     网页布局方面有很多例子可以让我们参考，不同的网页布局有不同的特点，显示出不同的效果，给人也会有不同的感受。下面我们来看一下网页布局方面的案例吧。

    等高响应式布局是什么？介绍它之前，我们先回忆一下它的近亲等宽响应式瀑布流。Google+、花瓣网、美丽说等是否让你沉浸于不断往下拉体验丰富的图片阅览？那种感觉就好像逛街，让所有的商品呈现在网页上，只需往下拉鼠标就能逐个浏览，不断加载，他们简洁同时整齐，原因是他们的宽度相等，但是高度不一。这就是所谓的等宽响应式瀑布流，它的特点如下：等宽，这样的布局十分合适瀑布流，有不断向下的阅读感；没有脚的小鸟，因为内容是不断向下加载，因此页脚基本是看不到了；响应式，适应PC端以及移动端各设备呈现不同的宽度和单列数量；这样的布局引起了一个风潮，然而把图片适应到等宽，高度等比例变化，对不考虑容器高度的浏览来说实现并不难，因此业界也大多采用了这样的布局，而且可以响应式，在不同屏幕宽度可以变化不同卡片宽度。等高响应式布局不像等宽一样简单，要在不改变图片分辨率(宽高比)同时保持等高且占满行宽度，如何实现？

    等高响应式布局是行间总宽度相等；图片分辨率（宽高比）不变；行内高度相等；自适应宽度布局；而它又难在并不知道一行需要多少个图片才能占满宽度，由于高度不确定，图片的宽度也不能够等比变化；如何做到自适应；布局用在用户的个人相册，数据量是有限且未知的，如何保证图片数量满行显示；行内高度一致，行间高度不一致，但是相差不能太过多；由上可知，这样的布局涉及太多变量，而且最难的是做到图片分辨率不改变，不影响图片的质量效果。

    这种布局还会出现很多不同方面的问题，让我来了解一下它会出现什么样的问题和有什么样的解决方案。用户图片数可能太少，会有图片只有1-3张占不满一行这样的情况，该怎样显示布局；解决方法：判断只有1行图片时不作布局调整，少于1行就默认显示等高变化后的图片即可(即只调整一次，不需为剩余值再自适应）。每行调整前的剩余宽度过大的，导致调整后宽高很大；解决方法：如果调整后宽高是原始宽高的150%左右则该行舍弃，这里考虑到整体的图片质量，确保不影响图片墙效果。高度调整公式会产生百分比，浏览器是会直接取整，因此可能会产生-2到2px的误差；解决方法：调整后记录每行误差值gap,然后循环把gap的值分给同行每一张图片，这样前2张图片可能会有±1px的图片宽度变化，但是用户基本觉察不了图片的轻微拉伸变化。用户上传的照片太小，例如16×16的小图标，如果一样的方式调整会与400×800这些图片并列放大，造成很大缩放比。解决方法：考虑到是图片墙的效果，一般不会有用户传一些其他的图片，例如表情素材等等，同时在图片处理时可以加一个排序，获取了图片宽高后把小于一定值的图片排在最后再一起显示。

    这样的布局的优势显而易见，整齐又多变，规则又繁杂，用最纯粹的方式展现出图片的魅力。