css3实现瀑布流布局+缺点用户体验差，但是性能高于js，jq，使用column属性

於刚

于 2016-08-19 14:26:32 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签：前端网页divcss静态 html javascript 布局 css

本文链接：https://blog.youkuaiyun.com/yugang930823/article/details/52250606

css 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何使用CSS3的column属性实现瀑布流布局，虽然用户体验相对差一些，但性能优于JavaScript和jQuery。通过设置column-width、padding和box-shadow等样式，实现了元素的排列和视觉效果。

#main{
    -webkit-column-width: 202px;
    -moz-column-width:202px;
}

.box{
    padding: 10px 0 0 15px;
}
.pic{
    padding:10px;
    border: 1px solid #cccccc;
    border-radius: 5px;
    box-shadow: 0 0 5px #cccccc;
    width: 165px;
}
.pic img{
    display: block;
    width: 165px;
    height: auto;
}