瀑布流布局的设计和实现

简介

瀑布流布局就是把大小不一的图片或者版块在不改变其原比例的同时铺满可视区，它们的宽度是一样的且保持着自己的比例，如花瓣网的布局

思路

想要实现这样的布局，先说白了，需要两个主要的技术点

• css的绝对定位布局
• js的dom操作

那怎么实现呢？大体思路是这样的，如下图，外围元素相对定位，之后每一张
图片都绝对定位，定位到合适的位置
是不是感觉不可思议，那如果有几千张图片，岂不得累死？当然不是！！接下来开始我们的具体步骤吧

一，确定列数

大概想一下，你这个瀑布流布局需要多少列，然后，我们可以用js获取容器的总宽度，然后去除于我们需要的列数，就可以得到每个图片的宽度了，如我们需要3列，或者4列

二，定位好第一行元素

什么是第一行元素？就是我们如果确定列数为三列，那么前三个图片就是第一行元素。假设列数为三列，那在我们得到图片元素数组后，可以把前三个，直接做定位，它们都距离容器顶部为0，且距离容器左边为图片宽度的倍数

三，其他图片见缝插针

前一行元素定位好之后，现在我要你想象，把每一列看做是一个整体，然后在这几个整体中总高度最小的那一列下面，添加我们的图片，也就是把我们的图片定位到高度最小的列下面，之后下一张图片也是一样，哪一列高度最小，就往哪里塞

我们可以用一个数组，如[ '第一列高度', '第二列高度' , '第三列高度']来记录每列高度，如有变化，及时更新数组。

实现

总结下上面的思路，大致就是分为

• 确定列数
• 定位第一行
• 见缝插针

接下来我们来具体实现了，假设有这么一个html结构

  <div class="wrapper">
    <div class="box">
      <img src="./images/杜甫江阁 (2).jpg" alt="">
      <img src="./images/杜甫江阁.jpg" alt="">
      <img src="./images/芙蓉路街头.jpg