瀑布流照片墙

最新推荐文章于 2024-07-28 13:53:31 发布

「已注销」

最新推荐文章于 2024-07-28 13:53:31 发布

阅读量244

点赞数

分类专栏：案例文章标签： html css javascript

本文链接：https://blog.csdn.net/lyc_3858/article/details/125053816

版权

本文介绍了如何创建瀑布流照片墙，重点在于等宽不等高的逻辑，即谁短插谁的原则。通过设置大盒子包裹图片并给予固定宽度，不设定高度，再结合CSS浮动布局实现。此外，还科普了offsetWidth、offsetLeft、offsetTop及offsetParent等JavaScript属性在布局计算中的应用。

摘要由CSDN通过智能技术生成

逻辑：等宽不等高,谁短插谁

看代码注释

结构

大盒子包着所有图片,大盒子和图片都一定得给宽度,高度不用给,给图片浮动。

科普

offsetWidth: 元素的width+元素的padding+边框的宽度 (和offsetHeight是一对)

offsetLeft和offsetTop:元素到offsetParent左边或者顶部的距离。

offsetParent：距离元素最近的一个具有定位的祖宗元素（relative，absolute，fixed）,如果有定位元素,那就是有定位元素的那个父级;若祖宗都不符合条件，offsetParent为body。

注意:如果想拿到元素到body左边或者顶部的距离,父级有定位的话,那就得一层一层往上加。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>瀑布流照片墙</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .c