百度图片横向瀑布流笔记

视频讲解：http://bbs.mafengshe.com/t

实现目标：

1.除了最后一行，其余左右对齐；

2.没有拉伸；

3.最后一行，相同效果，但只有左对齐；

4.hover时显示下方的文字，颜色渐变，居中（注意，当下方文字长显示不全时，变成省略号）

概念：

瀑布流：纵向

流式布局：横向

实现方法：

1.每个img外加上div.为了实现hover及文字包裹效果；

   float-wrap:wrap;自动折行

2.display:flex布局方式

  flex-grow:1;自动拉伸横向

 object-fit: cover 我的理解是将图片缩放或扩张在给定的区域里；

3.position的设置：图片本身是relative;相对定位，一张一张彼此相对定位；info和文字都是absolute，是相对于图片的绝对定位；

4.transition: all 0.5s弹出的动画效果

5.overflow:hidden;（要显示省略号，肯定不能要滚动条）

   white-space:nowrap:(段落中的文本不换行)

   text-overflow:ellipsis;(文字过多时显示省略号)