目标
- 熟悉木桶布局的实现原理
- 实现一个木桶布局
实现原理
表现形式： 一行中每个图片的高度相等，宽度自适应；设置高度后，宽度会等比缩放
原则： 图片不能变形
原理：
- 首先设置图片容器的宽度conWidth，决定了一行中图片占用的总宽度
- 获取一组图片，此时图片的高度和宽度可能都不相等
- 计算图片的宽高度
对每一张图片进行操作，等图片加载完成后，预先设置图片的高度height1= 200px，并根据图片的实际高度height2和宽度widht2比，计算出height1对应的width1，计算方法：width2 = (width2 / height2) * height1；这样就不会改变图片的宽高比。 - 遍历图片
将图片的宽度相加 totalWidth，如果totalWidth小于容器的宽度conWidth，就将该图片的信息添加到数组rowImgs中，如果超过了conWidth，说明达到了一行能放置的图片数，因此需要调整rowImgs数组中图片的高度，使得图片的宽度等比例调整，让图片占满整个一行，计算方式：img.height = (height1/totalWidth)*conWidth，这样图片就可以撑满一行，然后将图片渲染到页面上，便完成了一行图片的布局 - 重复这个过程，知道所有的图片都处理完成
