原生JavaScript实现瀑布流布局

原生Javascript实现瀑布流布局可以分为以下几个步骤：

步骤一：布局基础准备

• 定义要展示的图片或者内容容器的宽度，以便计算列数和每一列的宽度
• 获取当前容器中的所有子元素
• 定义一个数组存放每一列的高度

步骤二：计算列数和每一列的宽度

• 计算容器的宽度与每个子元素的宽度相除，取整，得到列数
• 根据列数，计算每一列的宽度，即容器宽度/列数

步骤三：遍历每个子元素，将其加入到最短的一列中

• 遍历每一个子元素
• 找到当前所有列中高度最小的一列
• 将当前子元素放置到高度最小的一列中
• 更新该列高度值

步骤四：将所有子元素全部布局完毕

• 遍历所有子元素，设置其定位信息，确定其在瀑布流中的位置

示例如下：

示例一

HTML代码：

<div class="waterfall">
    <img src="1.jpg" alt="">
    <img src="2.jpg" alt="">
    <img src="3.jpg" alt="">
    <img src="4.jpg" alt="">
    <img src="5.jpg" alt="">
</div>

Javascript代码：

const waterfall = document.querySelector('.waterfall');
const cols = 3; // 3列
const colWidth = waterfall.clientWidth / cols; // 每列的宽度
const colHeight = new Array(cols).fill(0); // 每列的高度初始化为0

// 遍历所有子元素
for (let i = 0; i < waterfall.children.length; i++) {
    const item = waterfall.children[i];
    const index = colHeight.indexOf(Math.min(...colHeight)); // 找高度最小的一列
    item.style.left = index * colWidth + 'px';
    item.style.top = colHeight[index] + 'px';
    colHeight[index] += item.clientHeight; // 更新该列高度
}

示例二

HTML代码：

<div class="waterfall">
    <div class="item">item 1</div>
    <div class="item">item 2</div>
    <div class="item">item 3</div>
    <div class="item">item 4</div>
    <div class="item">item 5</div>
</div>

Javascript代码：

const waterfall = document.querySelector('.waterfall');
const cols = 4; // 4列
const colWidth = waterfall.clientWidth / cols; // 每列的宽度
const colHeight = new Array(cols).fill(0); // 每列的高度初始化为0

// 遍历所有子元素
for (let i = 0; i < waterfall.children.length; i++) {
    const item = waterfall.children[i];
    const index = colHeight.indexOf(Math.min(...colHeight)); // 找高度最小的一列
    item.style.left = index * colWidth + 'px';
    item.style.top = colHeight[index] + 'px';
    colHeight[index] += item.clientHeight; // 更新该列高度
}

这两个示例都是基于固定的列数和容器宽度来实现的，如果想要实现自适应的瀑布流布局，可以在容器宽度变化时重新调用以上代码即可。