HTML+CSS+JS实现图片的瀑布流布局的示例代码

当前位置：电视猫 > Html5>

电视猫时间： 2024-08-01 10:01:26

HTML5 瀑布流布局示例代码

理解瀑布流布局

瀑布流布局是一种网页布局方式，其特点是多列布局，每列的高度不固定，内容块会自动填充到上一行最短的一列中，就像瀑布一样。这种布局形式常用于图片展示、商品列表等场景，可以展示更多内容，提升用户体验。

实现步骤

1. HTML 结构

HTML

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    </div>

container 是所有 item 的父元素，用于设置整体布局。
item 是单个内容块，可以是图片、文字等。

2. CSS 样式

CSS

.container {
    column-count: 3; /* 设置列数 */
    column-gap: 20px; /* 设置列间距 */
}

.item {
    width: 200px; /* 设置每个item的宽度 */
    /* 其他样式，如背景色、边框等 */
}

column-count 属性定义了列数。
column-gap 属性定义了列之间的间距。

3. JavaScript 代码

JavaScript

const items = document.querySelectorAll('.item');

// 获取每列的高度，初始值为0
const columnHeights = new Array(3).fill(0);

// 遍历每个item，将其添加到最短的一列
items.forEach(item => {
    const minHeightIndex = columnHeights.indexOf(Math.min(...columnHeights));
    item.style.top = columnHeights[minHeightIndex] + 'px';
    columnHeights[minHeightIndex] += item.offsetHeight;
});

代码解释

获取所有item元素：使用 querySelectorAll 获取所有具有 item 类的元素。
创建数组存储列高：创建一个数组，每个元素对应一列的高度，初始值为0。
遍历每个item：
- 找到当前高度最小的列。
- 将当前item的top值设置为该列的高度。
- 更新该列的高度。

完整示例

HTML

<!DOCTYPE html>
<html>
<head>
    <title>瀑布流布局</title>
    <style>
        /* ... CSS样式 ... */
    </style>
</head>
<body>
    <div class="container">
        <div class="item" style="height: 200px;"></div>
        </div>
    <script>
        // ... JavaScript代码 ...
    </script>
</body>
</html>