简单几行代码实现瀑布流

Posted wsjaizlp

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简单几行代码实现瀑布流相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<!-- 
 author : wsj
 aim : bky
 date : 2019-12
 bug : no
 -->
    <body>
        <style>
            .father{
                width: 100%;
                  box-sizing: border-box;
                 column-count: 2;
                  column-gap:15rpx;
                  padding: 0 20rpx;
            }
            .list{
              box-sizing: border-box;
              overflow: hidden;
              break-inside: avoid;
              border: 1px solid #efefef;
              border-radius: 5rpx;
              margin-bottom: 15rpx;
              background: #ffffff;
            }
        </style>
        <div class="father">
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
        </div>

    </body>
</html>

简单实现瀑布流

技术图片

以上是关于简单几行代码实现瀑布流的主要内容，如果未能解决你的问题，请参考以下文章

利用JS实现简单的瀑布流效果

前端jQuery实现瀑布流

简单实现加载图片的瀑布流效果

wordpress制作照片瀑布流的效果，如何实现？

请问我如何让这个图片顶上去形成瀑布流的效果啊

原生JS实现瀑布流布局