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

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

 

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

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

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

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

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

点我预览

 

 

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

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

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

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

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

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

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

<h1 class="get-latest-update">
    <a href="javascript:;">获取最近更新</a>
</h1>

<div class="img-items"></div>

<script type="text/template" id="img-item-tpl">
    <div class="img-item" style="flex-grow: {
  {width}}; width: {
  {width}}px;">
        <a href="#/img/{
  {id}}" style="padding-top: {
  {paddingTop}}%;">
            <img data-src="{
  {src}}" src="{
  {src}}" width="100%" height="100%">
        </a>
    </div>
</script>

上面页面模板中，flex-grow 与 width的值一致，用以按比例分配每行剩余空间

另外可以看到这里有个 padding-top 的百分比值

我们都知道 padding-top 的百分比值是基于父元素的宽度来计算的，根据盒模型，一般这种计算方式是为了获取固定宽高比

当父元素有宽度，但高度为0时，整体高度则由padding-top值来撑开，则父元素就有了一个设定的宽高比，

同时我们将子元素（这里是图片）position值设置为absolute，宽高占满父元素，则子元素图片也有了一定的宽高比，实现按比例的图片缩放

来看看对应的样式设置