flex布局,宽度自适应、图片自适应;
实现效果如下:
css代码:
通过弹性盒子flex进行布局;
html代码:
遍历生成DOM元素;
1、利用计算属性进行计算
2、根据PC端不同分辨率,确定不同分辨率下每行显示图片的个数,计算图片的宽度;
3、根据后端返回的数据以及每行显示的个数,计算可以显示几行;判断图片是否撑满了一行,若是没有撑满一行,则我们生成div,将图片撑满
4、将一维数组变成二维数据进行数据展示;
flex布局,宽度自适应、图片自适应;
通过弹性盒子flex进行布局;
遍历生成DOM元素;
1、利用计算属性进行计算
2、根据PC端不同分辨率,确定不同分辨率下每行显示图片的个数,计算图片的宽度;
3、根据后端返回的数据以及每行显示的个数,计算可以显示几行;判断图片是否撑满了一行,若是没有撑满一行,则我们生成div,将图片撑满
4、将一维数组变成二维数据进行数据展示;