JS瀑布流|极客笔记

JS瀑布流

瀑布流是一种流行的网页布局方式，它的特点是每个元素的位置不固定，而是根据窗口大小自动调整位置，从上到下依次排列，就像瀑布一样。瀑布流布局能够更有效地利用页面空间，适用于展示图片、新闻等需要大量内容展示的页面。在本文中，我们将探讨如何使用JavaScript实现一个简单的瀑布流布局。

实现思路

实现瀑布流布局的关键是计算每个元素的位置，使其能够自动适应页面大小。我们可以通过以下步骤实现简单的瀑布流布局：

创建一个包含多个图片的容器，初始时图片位置随机。
随着窗口大小变化，重新计算每个图片的位置。
每次添加新图片时，找到当前列高度最小的列，将新图片插入到该列。

HTML结构

首先，我们需要准备一个HTML结构，用于展示图片。以下是一个简单的HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>瀑布流</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container" id="container">
        <!-- 图片列表 -->
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS样式

为了实现瀑布流布局，我们需要使用CSS样式定义每个图片的位置。以下是一个简单的CSS样式：

.container {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    gap: 10px;
}

.item {
    width: 200px;
    height: auto;
    margin-bottom: 10px;
}

JavaScript 实现

接下来，我们使用JavaScript来实现瀑布流布局。我们将实现以下功能：

添加图片到容器中
计算每列的高度
将图片插入到高度最小的列中

const container = document.getElementById('container');
const colCount = 4; // 列数
const colHeight = new Array(colCount).fill(0); // 记录每列的高度

function addImage(url) {
    const img = new Image();
    img.src = url;
    img.classList.add('item');
    img.onload = function() {
        const minHeight = Math.min(...colHeight);
        const minIndex = colHeight.indexOf(minHeight);
        img.style.position = 'absolute';
        img.style.top = ` ${minHeight}px`; img.style.left = `$ {minIndex * 220}px`;
        container.appendChild(img);
        colHeight[minIndex] += img.height + 10;
    }
}

// 示例：添加多个图片到容器中
addImage('https://via.placeholder.com/200/FF0000');
addImage('https://via.placeholder.com/200/00FF00');
addImage('https://via.placeholder.com/200/0000FF');
addImage('https://via.placeholder.com/200/FFFF00');
addImage('https://via.placeholder.com/200/FF00FF');
addImage('https://via.placeholder.com/200/00FFFF');

在上面的示例中，我们定义了一个addImage函数，用于往容器中添加图片。每次添加图片时，我们会找到当前列高度最小的列，然后将图片插入到该列中。随着图片的不断添加，容器中的图片会自动排列成瀑布流布局。