木桶布局的实现原理
2018-12-28 本文已影响18人
5吖
一、定义
高度相同,而宽度不一样的布局
二、实现原理
1、首先设置一个基准的高度,将图片以一定的宽高比压缩至该高度内的第一行。
2、将图片水平依次放满第一行,当空间不够时,将前面的图片作为一个整体,拉伸至其宽度刚好可以撑满容器。
3、之后多余的图片,就放到第二行,重复上述步骤,以此类推
image.png
高度相同,而宽度不一样的布局
1、首先设置一个基准的高度,将图片以一定的宽高比压缩至该高度内的第一行。
2、将图片水平依次放满第一行,当空间不够时,将前面的图片作为一个整体,拉伸至其宽度刚好可以撑满容器。
3、之后多余的图片,就放到第二行,重复上述步骤,以此类推