zoukankan      html  css  js  c++  java
  • 纯 css column 布局实现瀑布流效果

    原理

    CSS property: columns。CSS属性 columns 用来设置元素的列宽和列数。

    兼容性

    • chrome 50+
    • IE 10+
    • android browser 2.1+ with -webkit-

    MDN 文档

    效果

    代码

    <div class="wrap"> 
      <div class="item"> 
        <div class="item_content content-lar"> 1 </div> 
      </div> 
      <div class="item"> 
        <div class="item_content content-sma"> 2 </div> 
      </div>
      <div class="item"> 
        <div class="item_content content-mid"> 3 </div> 
      </div>
      <div class="item"> 
        <div class="item_content content-sma"> 4 </div> 
      </div>
      <div class="item"> 
        <div class="item_content content-mid"> 5 </div> 
      </div>
      <div class="item"> 
        <div class="item_content content-lar"> 6 </div> 
      </div>
      <div class="item"> 
        <div class="item_content content-sma"> 7 </div> 
      </div>
      <div class="item"> 
        <div class="item_content content-lar"> 8 </div> 
      </div>
      <div class="item"> 
        <div class="item_content content-lar"> 9 </div> 
      </div>
      <div class="item"> 
        <div class="item_content content-sma"> 10 </div> 
      </div>
      <div class="item"> 
        <div class="item_content content-mid"> 11 </div> 
      </div>
      <div class="item"> 
        <div class="item_content content-mid"> 12 </div> 
      </div>
    </div>
    
    .wrap {
       1280px;
      margin: 0 auto;
    
      column-count: 4;
      column-gap: 2em;
    }
    .item {
      padding: 2em;
      margin-bottom: 2em;
      
    
      break-inside: avoid;
      background: #f60;
    }
    .content-lar {
      height: 300px;
    }
    .content-sma {
      height: 100px;
    }
    .content-mid {
      height: 200px;
    }
    

    心得

    在过去本人还用 100+ 行代码写过 JS 版的瀑布流效果,讲真,CSS 越来越强大,有目共睹。

  • 相关阅读:
    silverlight 之 – Blend 之 Style for Button (三)
    silverlight 之 – Blend 一切源于Brush(一)
    silverlight 之 – Blend 之 Accordion (五)
    ASp.net下 fckeditor 配置图片上传最简单的方法
    ubuntu 升级java7
    ubuntu下远程登录mysql
    Tomcat 连接池 数据源配置
    wget使用方法命令详解
    修改mysql提示符
    chrome 的几种about
  • 原文地址:https://www.cnblogs.com/everlose/p/12491757.html
Copyright © 2011-2022 走看看