瀑布流布局顶端边距失效是怎么回事

Posted 2023-03-18

参考技术A 瀑布流布局有一个专业的英文名称Masonry Layouts。瀑布流布局已经有好多年的历史了，我最早知道这个名词的时候大约是在2012年，当时Pinterest网站的布局就是使用的这种流式布局，简言之像Pinterest网站这样的布局就称之为瀑布流布局，也有人称之为Pinterest 布局。

　　瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式。即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。

　　瀑布流布局的核心是基于一个网格的布局，而且每行包含的项目列表高度是随机的（随着自己内容动态变化高度），同时每个项目列表呈堆栈形式排列，最为关键的是，堆栈之间彼此之间没有多余的间距差存大。还是上张图来看看我们说的瀑布流布局是什么样子。

用css3的 clomus 布局 怎么写瀑布流

body里面只有一个div 其他的部分直接追加 怎么写啊 用css3的 columns布局怎么写呢 ？ 哪位大神告知一下啊

参考技术A

首先，css3的布局主要用到下面三个属性

column-count

column-gap

column-rule

其次，在兼容column的浏览器中可以实现瀑布流，代码如下

.demo
    width: 500px;
    height: auto;

    -webkit-column-count:3;
    -moz-column-count:3;
    column-count:3;

    -webkit-column-gap:10px;
    -moz-column-gap:10px;
    column-gap:10px;

    column-rule:3px outset #ff0000;

    border: 1px solid #ddd;

.demo div
    background: #336699;
    margin-bottom: 4px;
    color: #eee;
    padding: 10px;

<div class="demo">
        <div>1这是测试用的文字，测试能不能实现瀑布流。</div>
        <div>2这是测试用的文字，测试能不能实现瀑布流。</div>
        <div>3这是测试用的文字，测试能不能实现瀑布流。</div>
        <div>4这是测试用的文字，测试能不能实现瀑布流。</div>
        <div>5这是测试用的文字，测试能不能实现瀑布流。</div>
        <div>6这是测试用的文字，测试能不能实现瀑布流。</div>
        <div>7这是测试用的文字，测试能不能实现瀑布流。</div>
        <div>8这是测试用的文字，测试能不能实现瀑布流。</div>
        <div>9这是测试用的文字，测试能不能实现瀑布流。</div>
        <div>11这是测试用的文字，测试能不能实现瀑布流。</div>
        <div>12这是测试用的文字，测试能不能实现瀑布流。</div>
        <div>13这是测试用的文字，测试能不能实现瀑布流。</div>
        <div>14这是测试用的文字，测试能不能实现瀑布流。</div>
        <div>15这是测试用的文字，测试能不能实现瀑布流。</div>
        <div>16这是测试用的文字，测试能不能实现瀑布流。</div>
        <div>17这是测试用的文字，测试能不能实现瀑布流。</div>
        <div>18这是测试用的文字，测试能不能实现瀑布流。</div>
        <div>19这是测试用的文字，测试能不能实现瀑布流。</div>
    </div>
</div>

追问

可以实现瀑布流效果么？把JS部分也给补上呗😁😁😁