实现方式

全文以双列瀑布流为例

下面主要说三种实现方式

1. 定位 （macy插件就是position实现的）
2. flex布局（推荐）

<div class="masonry"> 
<div class="column"> 
<div class="item"></div> 
<!-- more items--> 
</div> 
<div class="column"> 
<div class="item"></div>
</div> 
</div> 

.masonry { 
display: flex; // 设置为Flex容器
flex-direction: row; // 主轴方向设置为水平方向 
} 
.column { 
display: flex; // 设置为Flex容器
flex-direction: column; // 主轴方向设置为垂直方向
}

3. grid布局（不推荐，教程移步链接）
4. 普通布局（水平方向两列，列内以行内元素布局）

瀑布流布局的缺点：图片高度不一致导致的列高度差距大，很影响用户体验

解决办法：

1. 方案一（推荐）： 后端存储图片宽高，存储总两列总高度，根据列高度判断，较低高度的列push数据，并累加该列总高度

2. 方案二 (次推荐)： 前端获取数据后先行加载全部图片，获取图片宽高

/**
 * @description: 获取图片宽高
 */
export const getImageInfo = (url) => {
  //  图片的宽高
  return new Promise((resolve, reject) => {
    let img = new Image();
    img.src = url;
    img.onload = function (image) {
      resolve({ ...image, width: img.width, height: img.height });
    };
    img.onerror = function (e) {
      resolve({
        code: 400,
        error: e,
      });
    };
  });
};

后续步骤同方案一；

3. 方案三 (不推荐)： 前端获取数据后，一个项一个项渲染，第一个项渲染完毕（image onload之后），根据onload返回的图片高度进行两列统计累加，每次push数据到低列，并累加对应列的高度，以此类推