CSS3 实现瀑布流布局

瀑布流布局是种常见的布局方式,常用于图片相关的样式展示,通过CSS3的多列(Multi-column)属性,可以简单的实现类似效果。


具体步骤:

1.设置外部容器多列列数(column-count)和列间距(column-gap)

2.设置内容条目的break-inside属性为avoid,使条目总体不被打断。


<div class="container"> //最外层容器
  <div class="item">//条目
     <div class="item__content">//条目内容
      <img src=''>
     </div>
   </div>
   <div class="item">
     <div class="item__content">
       <img src=''>
     </div> 
   </div>
   <!-- more items --> 
    .........
</div>     


.container {
  column-count: 4; //多列的列数
  column-gap: 0;//列间距
 }

.item{
  break-inside: avoid;//避免在主体框中插入任何中断(页面,列或区域)。
}


 

随机推荐
jQuery Mobile 1.4.5 select数据更新
Webpack使用polyfill打包兼容低版本浏览器
HTTP Authorization 之 Basic Auth
详谈JavaScript数组合并常见几大方法
jQuery Ajax范例
关于磅
CSS3 实现瀑布流布局
Node.js 递归遍历目录
CKEditor文件上传
大白虎 2019.02.26 两小时练习