likes
comments
collection
share

面试题：如何快速实现瀑布流布局

作者站长头像
站长
· 阅读数 22

引言

大家好，今天我要和大家分享的是关于如何快速实现瀑布流布局的方法。瀑布流布局是一种非常流行的网页布局方式，通过不规则排列元素，给人一种自由、动感的视觉体验。如果你想让你的网站看起来更具有创意和活力，那么快跟着我一起来看看如何轻松实现瀑布流布局吧！我们将分别从HTML、CSS和JavaScript三个部分展开讨论，让你在制作时钟的过程中更加游刃有余，充满乐趣。

成品展示：

面试题：如何快速实现瀑布流布局

基础知识

HTML部分

首先，让我们从HTML部分开始。在实现瀑布流布局时，我们需要使用HTML来搭建页面的结构。通过合理的布局，我们可以让元素在页面上呈现出理想的效果。在HTML中，我们需要考虑如何将内容块按照一定规则分布，为后续的CSS和JavaScript操作奠定基础。

<div id="container">
        <div class="box">
            <div class="box-img">
                <img src="./img/1.jpg" alt="">
            </div>
        </div>
        ......
</div>

这是一个基础结构，container为包含所有内容的容器 div。box用来包裹图片，有多少个box取决于你想要展示多少张图片。

CSS部分

接下来，让我们来看看CSS是如何助力我们实现瀑布流布局的。CSS不仅可以控制页面的样式，还可以让元素按照我们的设计排列，从而呈现出瀑布流的效果。通过设置元素的位置、尺寸和间距等属性，我们可以使页面呈现出多彩多姿、错落有致的布局，给用户带来全新的浏览体验。

* {
    margin: 0;
    padding: 0;
}

#container {
    position: relative;
    margin: 0 auto;
}

.box {
    /*`.box` 元素浮动，使其在同一行内显示。*/
    float: left;
    padding: 5px;
}

.box-img {
    width: 150px;
    padding: 5px;
    /* border: 1px solid red */
}

img {
    width: 100%;
}

  1. 通用样式 *：

    • margin: 0; padding: 0;：将所有元素的外边距和内边距重置为零，以确保页面的一致性。

  2. #container 样式：

    • position: relative;：给容器设置相对定位，便于后期图片根据它进行定位。
    • margin: 0 auto;：将容器水平居中。

  3. .box 样式：

    • float: left;：使 .box 元素浮动到左边，使其在同一行内显示。
    • padding: 5px;：设置 .box 元素的内边距为5px。

  4. .box-img 样式：

    • width: 150px;：限制 .box-img 元素的宽度为150px。
    • padding: 5px;：设置 .box-img 元素的内边距为5px。

  5. img 样式：

    • width: 100%;：使所有图片填充其容器的100%宽度，以确保图片自适应容器宽度。

JS部分

最后，让我们了解一下JavaScript在实现瀑布流布局中的作用。JavaScript可以帮助我们实现元素的动态加载和排列，使得页面呈现出更加生动、灵活的效果。

  1. 功能概述：

    • 函数 imgLocation(parent, content) 用于根据屏幕宽度和图片的宽度决定一行可放置多少张图片，并根据每列的高度动态排列图片，形成瀑布流布局。

  2. 关键步骤：

    • 获取元素：通过传入的父容器 ID 和内容类名获取对应的元素集合。
    • 计算图片宽度：获取第一张图片的宽度，用以确定一行能容纳多少张图片。
    • 设置容器宽度：根据图片宽度和可容纳图片数量设置容器宽度，以保持图片在一行内展示。
    • 排列图片：遍历图片，根据最矮列的高度将下一张图片放置在最矮列下方，维护每列高度以便后续图片排列至最矮列。

  3. 具体逻辑：

    • 首先排列第一行图片，然后根据每列高度动态确定下一张图片的位置，使得图片逐行排列。
    • 通过绝对定位设置每张图片的位置，并更新列高度以便下一张图片正确排列在最矮列下方。

以下是代码示例：

imgLocation('container', 'box');


function imgLocation(parent, content) {

    // 获取所有图容器
    var cparent = document.getElementById(parent);
    var ccontent = cparent.querySelectorAll(`.${content}`);
    
    // 每一个box的宽度
    var imgWidth = ccontent.length > 0 ? ccontent[0].offsetWidth : undefined;
    
    // 一行可以放多少张
    var num = Math.floor(document.documentElement.clientWidth / imgWidth);
    cparent.style.width = `${imgWidth * num}px`;

    // 添加图片
    var boxHeightArr = [];
    for (var i = 0; i < ccontent.length; i++) {
        // 第一列的高度
        if (i < num) {
            boxHeightArr.push(ccontent[i].offsetHeight);
        } else {

            // 获取最矮的那一列
            var minHeight = Math.min(...boxHeightArr);
            var minIndex = boxHeightArr.indexOf(minHeight);

            // 摆放图片位置
            ccontent[i].style.position = 'absolute';
            ccontent[i].style.top = minHeight + 'px';
            ccontent[i].style.left = ccontent[minIndex].offsetLeft + 'px';

            // 更新高度
            boxHeightArr[minIndex] += ccontent[i].offsetHeight;
        }
    }
}

结语

通过HTML、CSS和JavaScript三个方面的讨论，相信大家已经对如何快速实现瀑布流布局有了更深入的了解。在实践中，不断尝试、积累经验，相信你也能轻松掌握这一炙手可热的布局方式，为你的网站注入更多活力和创意。希望本篇文章能够对你有所帮助，谢谢你的阅读！今天的内容就到这里了。如果你觉得这篇文章有帮助或有所启发，别忘了给我一个鼓励的赞哦！

转载自:https://juejin.cn/post/7361231869587652619
评论
请登录