不固定图片宽高瀑布流_图片横向等高瀑布流，每行占满，限制行数 的实现

图片的横向瀑布流，其实简单地按顺序排列就可以了

但要实现每行中各图片都等高(各行不一定等高，但每行里面等高)，且每行都占满，就需要用到flex的特性了

控制每行图片高度都一致，可能会影响图片的比例，所以不能简单暴力地设置高度，需要按比例来动态计算

另外，如要限制图片展示的行数，则只需判断好每行总高度与容器总高度的关系即可

这里就来实现一下这个小功能

因为都是假数据的关系，图片的宽高值是随机数，并非原图宽高值，仅作参考

看完上面那张大大的图，先想一下可以怎么实现..

要实现每行都能够占满，需要用到 flex-grow 这个属性

flex-grow基于flex-basis基准值来计算，而flex-basis则基于项目的width、min|max-width相关的值来计算，或者手动定义

使用flex-grow可以分配按比例分配主轴的剩余空间

如果有10张图片需要放置，第一行仅可以放置四张图片，剩余100px的空间，那么各图片的flex-grow可以直接配置成图片的宽度width值，即可很方便精准地分配好这剩余的空间

第二行可以放五张图片，剩余N px的空间... 按照这种计算方式来铺满每一行

获取最近更新