zoukankan      html  css  js  c++  java
  • CSS实现瀑布流布局

    html标签格式

    <div class="box">
        <div class="item">
            <img  src="banner.jpg" alt="" />
        </div>
        <div class="item">
            <img  src="show.jpg" alt="" />
        </div>
        <div class="item">
            <img  src="cloth.jpg" alt="" />
        </div>
        <div class="item">
            <img  src="banner.jpg" alt="" />
        </div>
        <div class="item">
            <img  src="show.jpg" alt="" />
        </div>
        <div class="item">
            <img  src="cloth.jpg" alt="" />
        </div>
        <div class="item">
            <img  src="banner.jpg" alt="" />
        </div>
        <div class="item">
            <img  src="show.jpg" alt="" />
        </div>
        <div class="item">
            <img  src="cloth.jpg" alt="" />
        </div>
        <div class="item">
            <img  src="show.jpg" alt="" />
        </div>
        <div class="item">
            <img  src="cloth.jpg" alt="" />
        </div>
        <div class="item">
            <img  src="banner.jpg" alt="" />
        </div>
    </div>

    一、flex 弹性布局实现瀑布流

            .box {
              display: flex;  
              flex-flow:column wrap;
              height: 100vh;
            }
            .item {
                margin: 10px;
                width: calc(100%/3 - 20px);     //这里要展示几列就除于几
            }
            .item img{
                width: 100%;
                height:100%;
            }    

    二、column 多行布局实现瀑布流

    column 实现瀑布流主要依赖两个属性。
    一个是 column-count 属性,是分为多少列。
    一个是 column-gap 属性,是设置列与列之间的距离。

            .box {
                margin: 10px;
                column-count: 3;
                column-gap: 10px;
            }
            .item {
                margin-bottom: 10px;
            }
            .item img{
                width: 100%;
                height:100%;
            }
  • 相关阅读:
    HTML5第二节
    HTML5在移动端开发的12大特性
    移动端开发遇到的坑
    html5 meta(移动端)介绍及使用
    CSS的margin塌陷(collapse)
    Block Demo
    设计模式之代理
    OC Block网上转载
    GCD之全局、主线程
    Spark SQL中 RDD 转换到 DataFrame
  • 原文地址:https://www.cnblogs.com/chensv/p/13930615.html
Copyright © 2011-2022 走看看