瀑布流布局

最新推荐文章于 2024-08-02 16:18:47 发布

Ruan丶权酒歌

最新推荐文章于 2024-08-02 16:18:47 发布

阅读量262

点赞数

本文链接：https://blog.csdn.net/weixin_44560824/article/details/101593276

版权

开发工具与关键技术：MVC
作者：胡名权
撰写时间：2019年9月25日

flex 实现瀑布流需要将最外层元素设置为 display: flex，即横向排列。然后通过设置 flex-flow:column wrap 使其换行。设置 height: 100vh 填充屏幕的高度，来容纳子元素。每一列的宽度可用 calc 函数来设置，即 width: calc(100%/3 - 20px)。分成等宽的 3 列减掉左右两遍的 margin 距离。原来瀑布流就是让物品在堆叠在一起的时候有一定的上下距离，让用户看到每种不同的样式以达到吸引的效果，更为美观—而网络上称之为瀑布式布局。

<html>
<head>
    <style>
        .box {
          display: flex;  
          flex-flow:column wrap;
          height: 100px;
        }
        .item {
            margin: 10px;
            width: calc(100%/3 - 20px);
        }
        .item img{
            width: 100%;
            height:100%;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="item">
        <img  src="short.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="kutt.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="short.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="kutt.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="short.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="kutt.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="short.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="kutt.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="banner.jpg" alt="" />
    </div>
</div>
</body>

在这里插入图片描述