瀑布流的布局自我感觉还是很吸引人的，最近又看到实现瀑布流这个做法，在这里记录下，特别的，感觉flex布局实现瀑布流还是有点懵的样子，不过现在就可以明白它的原理了

1.multi-column多列布局实现瀑布流

先简单的讲下multi-column相关的部分属性

column-count设置列数
column-gap设置列与列之间的间距
column-width设置每列的宽度

还要结合在子容器中设置break-inside防止多列布局，分页媒体和多区域上下文中的意外中断

break-inside属性值

  auto  指定既不强制也不禁止元素内的页/列中断。

  avoid  指定避免元素内的分页符。

  avoid-page  指定避免元素内的分页符。

  avoid-column 指定避免元素内的列中断。

  avoid-region  指定避免元素内的区域中断。

截取了部分，可自己填充

/* html文件 */

<!-- 使用multi-columns实现瀑布流 -->

<div id="root">

    <div class="item">

        <img class="itemImg" src="../images/1.jpeg" alt=""/>

        <div class="userInfo">

            <img class="avatar" src="../images/gift.png" alt=""/>

            <span class="username">牵起你的左手护着你</span>

        </div>

    </div>

    <div class="item">

        <img class="itemImg" src="../images/2.jpg" alt=""/>

        <div class="userInfo">

            <img class="avatar" src="../images/gift.png" alt=""/>

            <span class="username">牵起你的左手护着你</span>

        </div>

    </div>

    <div class="item">

        <img class="itemImg" src="../images/3.jpg" alt=""/>

        <div class="userInfo">

            <img class="avatar" src="../images/gift.png" alt=""/>

            <span class="username">牵起你的左手护着你</span>

        </div>

    </div>

    <div class="item">

        <img class="itemImg" src="../images/4.jpg" alt=""/>

        <div class="userInfo">

            <img class="avatar" src="../images/gift.png" alt=""/>

            <span class="username">牵起你的左手护着你</span>

        </div>

    </div>

    <div class="item">

        <img class="itemImg" src="../images/5.jpeg" alt=""/>

        <div class="userInfo">

            <img class="avatar" src="../images/gift.png" alt=""/>

            <span class="username">牵起你的左手护着你</span>

        </div>

    </div>

</div>

/* css样式 */

body {

    background: #e5e5e5;

}

/* 瀑布流最外层 */

#root {

     margin: 0 auto;

     width: 1200px;

     column-count: 5;

     column-width: 240px;

     column-gap: 20px;

}

/* 每一列图片包含层 */

.item {

     margin-bottom: 10px;

     /* 防止多列布局，分页媒体和多区域上下文中的意外中断 */

     break-inside: avoid;

     background: #fff;

}

.item:hover {

     box-shadow: 2px 2px 2px rgba(0, 0, 0, .5);

}

/* 图片 */

.itemImg {

     width: 100%;

     vertical-align: middle;

}

/* 图片下的信息包含层 */

.userInfo {

     padding: 5px 10px;

}

.avatar {

     vertical-align: middle;

     width: 30px;

     height: 30px;

     border-radius: 50%;

}

.username {

     margin-left: 5px;

     text-shadow: 2px 2px 2px rgba(0, 0, 0, .3);

}

2.flex布局实现瀑布流

将外层设置为row布局，然后再设置一个容器并设置为column布局，它是将列作为一个整体，然后在对列进行划分，在列里进行宽固定来实现的

/* html文件（只截取两列布局）*/

<div id="root">

    <div class="itemContainer">

        <div class="item">

            <img class="itemImg" src="../images/1.jpeg" alt=""/>

            <div class="userInfo">

                <img class="avatar" src="../images/gift.png" alt=""/>

                <span class="username">牵起你的左手护着你</span>

            </div>

        </div>

        <div class="item">

            <img class="itemImg" src="../images/2.jpg" alt=""/>

            <div class="userInfo">

                <img class="avatar" src="../images/gift.png" alt=""/>

                <span class="username">牵起你的左手护着你</span>

            </div>

        </div>

        <div class="item">

            <img class="itemImg" src="../images/3.jpg" alt=""/>

            <div class="userInfo">

                <img class="avatar" src="../images/gift.png" alt=""/>

                <span class="username">牵起你的左手护着你</span>

            </div>

        </div>

        <div class="item">

            <img class="itemImg" src="../images/4.jpg" alt=""/>

            <div class="userInfo">

                <img class="avatar" src="../images/gift.png" alt=""/>

                <span class="username">牵起你的左手护着你</span>

            </div>

        </div>

        <div class="item">

            <img class="itemImg" src="../images/5.jpeg" alt=""/>

            <div class="userInfo">

                <img class="avatar" src="../images/gift.png" alt=""/>

                <span class="username">牵起你的左手护着你</span>

            </div>

        </div>

        <div class="item">

            <img class="itemImg" src="../images/6.jpeg" alt=""/>

            <div class="userInfo">

                <img class="avatar" src="../images/gift.png" alt=""/>

                <span class="username">牵起你的左手护着你</span>

            </div>

        </div>

        <div class="item">

            <img class="itemImg" src="../images/7.jpeg" alt=""/>

            <div class="userInfo">

                <img class="avatar" src="../images/gift.png" alt=""/>

                <span class="username">牵起你的左手护着你</span>

            </div>

        </div>

    </div>

    <div class="itemContainer">

        <div class="item">

            <img class="itemImg" src="../images/5.jpeg" alt=""/>

            <div class="userInfo">

                <img class="avatar" src="../images/gift.png" alt=""/>

                <span class="username">牵起你的左手护着你</span>

            </div>

        </div>

        <div class="item">

            <img class="itemImg" src="../images/7.jpeg" alt=""/>

            <div class="userInfo">

                <img class="avatar" src="../images/gift.png" alt=""/>

                <span class="username">牵起你的左手护着你</span>

            </div>

        </div>

        <div class="item">

            <img class="itemImg" src="../images/6.jpeg" alt=""/>

            <div class="userInfo">

                <img class="avatar" src="../images/gift.png" alt=""/>

                <span class="username">牵起你的左手护着你</span>

            </div>

        </div>

        <div class="item">

            <img class="itemImg" src="../images/5.jpeg" alt=""/>

            <div class="userInfo">

                <img class="avatar" src="../images/gift.png" alt=""/>

                <span class="username">牵起你的左手护着你</span>

            </div>

        </div>

        <div class="item">

            <img class="itemImg" src="../images/6.jpeg" alt=""/>

            <div class="userInfo">

                <img class="avatar" src="../images/gift.png" alt=""/>

                <span class="username">牵起你的左手护着你</span>

            </div>

        </div>

        <div class="item">

            <img class="itemImg" src="../images/6.jpeg" alt=""/>

            <div class="userInfo">

                <img class="avatar" src="../images/gift.png" alt=""/>

                <span class="username">牵起你的左手护着你</span>

            </div>

        </div>

    </div>

</div>

/* css文件 */

body{

   background: #e5e5e5;

}

#root{

    display: flex;

    flex-direction: row;

    margin: 0 auto;

    width: 1200px;

}

.itemContainer{

    margin-right: 10px;

    flex-direction: column;

    width: 240px;

}

.item{

   margin-bottom: 10px;

   background: #fff;

}

.itemImg{

   width: 100%;

}

.userInfo {

   padding: 5px 10px;

}

.avatar {

   vertical-align: middle;

   width: 30px;

   height: 30px;

   border-radius: 50%;

}

.username {

   margin-left: 5px;

   text-shadow: 2px 2px 2px rgba(0, 0, 0, .3);

}

实践后发现，纯css实现的瀑布流只能是一列一列的排布，所以还是得用js来实现瀑布流更符合我们常见的瀑布流

正在努力学习中，若对你的学习有帮助，留下你的印记呗（点个赞咯^_^）

往期好文推荐：

纯css实现瀑布流（multi-column多列及flex布局）的更多相关文章

详解纯css实现瀑布流（multi-column多列及flex布局）
瀑布流的布局自我感觉还是很吸引人的,最近又看到实现瀑布流这个做法,在这里记录下,特别的,感觉flex布局实现瀑布流还是有点懵的样子,不过现在就可以明白它的原理了 1.multi-column多列布局实 ...
CSS001. 纯CSS实现瀑布流（纵向排序）
通过 Multi-columns 相关的属性 column-count.column-gap 配合 break-inside 来实现瀑布流布局. 首先对包裹图片的盒子增加样式,column-count ...
简单CSS定位瀑布流实现方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
分别用js和css实现瀑布流
下午查找了瀑布流的相关原理,找了一些css3实现的还有js实现的,最后总结了一些比较简单的,易懂的整理起来 1.css3实现只要运用到 column-count分列 column-width固 ...
纯CSS实现瀑布流布局
https://www.w3cplus.com/css/pure-css-create-masonry-layout.html
通过css 实现“瀑布流”
.hot_list{-webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -moz-column-gap:7px; -webk ...
css实现瀑布流
<style> .container{ column-width:250px; -webkit-column-width:250px; ...
分享：纯 css 瀑布流和 js 瀑布流
分享一次纯 css 瀑布流和 js 瀑布流纯 css 写瀑布流 1.multi-columns 方式: 通过 Multi-columns 相关的属性 column-count.column-ga ...
关于瀑布流的布局原理分析（纯CSS瀑布流与JS瀑布流）
瀑布流又称瀑布流式布局,是比较流行的一种网站页面布局方式.即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置. 为什么使用瀑 ...

随机推荐

css 实现渐变
background:-ms-radial-gradient(circle,rgba(0, 0, 0, 0.2),rgba(0,0,0,0)); /* IE 10*/ background: -web ...
使用 Spring HATEOAS 开发 REST 服务
使用 Spring HATEOAS 开发 REST 服务学习博客:https://www.ibm.com/developerworks/cn/java/j-lo-SpringHATEOAS/ htt ...
Smashing Nodejs 读书笔记（二）
了不起的Node.js:将JavaScript进行到底书名:SMASHING Node.js : JavaScript Everywhere 原作者:(美)劳奇 Rauch.G 译者:赵静出版日期 ...
C# 数据类型之间的转换
C数据类型转换 https://www.cnblogs.com/bluestorm/p/3168719.html 1 字符串解析为整数: a = int.Parse (Console.ReadLine ...
离线安装 Cloudera ( CDH 5.x )（转载）
要配置生产环境前,最好严格按照官方文档/说明配置环境.比如,官方说这个安装包用于RETHAT6, CENTOS6,那就要装到6的版本下,不然很容易出现各种各样的错. 配置这个CDH5我入了很多坑: C ...
Kubeadm安装Kubernetes 1.15.1
一.实验环境准备服务器虚拟机准备 IP CPU 内存 hostname 192.168.198.200 >=2c >=2G master 192.168.198.201 >=2c ...
CSS制作垂直口风琴2
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
C#判断页面中的多个文本框输入值是否有重复的实现方法
List<string> list = new List<string>();//首先定义一个泛型数组 //这里假如说有四个文本框 string mainseat = this ...
ffmpeg的中文文档
1. 概要 ffmpeg [global_options] {[input_file_options] -i INPUT_FILE} ... {[output_file_options] OUTPUT ...
Raven2
Raven2实验 0x01 寻找IP 本机IP:56.130 1. 使用 nmap -sn "ip6"#主机发现(不进行端口扫描) https://cloud.tencent.c ...

纯css实现瀑布流（multi-column多列及flex布局）

1.multi-column多列布局实现瀑布流

2.flex布局实现瀑布流

纯css实现瀑布流（multi-column多列及flex布局）的更多相关文章

随机推荐

热门专题