vue 图片自适应排列插件_将一堆图片自适应页面排列

最近在开发一个批量展示图片的页面，图片的自适应排列是一个无法避免的问题

在付出了许多头发的代价之后，终于完成了图片排列，并封装成组件，最终效果如下

一、设计思路

为了使结构清晰，我将图片列表处理成了二维数组，第一维为行，第二维为列

render() {

const { className } = this.props;

// imgs 为处理后的图片数据，二维数组

const { imgs } = this.state;

return ((this.containerRef = ref)}

className={className ? `w-image-list ${className}` : 'w-image-list'}

>

{Array.isArray(imgs) &&

imgs.map((row, i) => {

return (// 渲染行{Array.isArray(row) &&

row.map((item, index) => {

return (// 渲染列

width: `${item.width}px`,

}}

onClick={() =>{

this.handleSelect(item);

}}

>

);