纯CSS3实现的瀑布布局

最新推荐文章于 2021-06-16 17:46:20 发布
最新推荐文章于 2021-06-16 17:46:20 发布
阅读量693 收藏
点赞数
分类专栏： html5+css3 
转自：http://www.cnblogs.com/love17914/archive/2012/05/10/2495051.html


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3瀑布布局</title>
<style>
        .container{
                -webkit-column-width:160px;
                -moz-column-width:160px;
                -o-colum-width:160px;
                -webkit-column-gap:1px;
                -moz-column-gap:1px;
                -o-column-gap:1px;
        }
        div:not(.container){
                -webkit-border-radius:5px;
                -moz-border-radius:5px;
                border-radius:5px;
                background:#D9D9D9;
                border::#CCC 1px solid;
                display:inline-block;
                width:157px;
                position:relative;
                margin:2px;
        }
        .title{
                 line-height:80px; font-size:18px; color:#900;
                 text-align:center;
                 font-family:"Microsoft YaHei";
        }
</style>
</head>

<body>
<section>
        <div class="container">
            <div style="height:80px" class="title">纯CSS3瀑布布局</div>
        <div style="height:260px"></div>
        <div style="height:65px"></div>
        <div style="height:120px"></div>
        <div style="height:145px"></div>
        <div style="height:90px"></div>
        <div style="height:145px"></div>
        <div style="height:160px"></div>
        <div style="height:65px"></div>
        <div style="height:230px"></div>
        <div style="height:140px"></div>
        <div style="height:85px"></div>
        <div style="height:20px"></div>
        <div style="height:145px"></div>
        <div style="height:50px"></div>
              <div style="height:65px"></div>
        <div style="height:230px"></div>
        <div style="height:140px"></div>
        <div style="height:85px"></div>
        <div style="height:20px"></div>
        <div style="height:145px"></div>
        <div style="height:50px"></div>
        <div style="height:145px"></div>
        <div style="height:160px"></div>
        <div style="height:240px"></div>
    </div>
</section>
</body>
</html>
复制代码

运行效果(FireFox，Google Chrome下测试通过，其他浏览器未做测试~~)：

SunShine0427
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯css3实现横向瀑布流布局，横向瀑布流代码.zip
07-20
在传统的瀑布流布局中，元素通常是垂直排列的，但在本案例中，我们将讨论如何使用纯CSS3实现横向瀑布流布局。 首先，要理解CSS3中实现这一布局的关键技术。主要是使用`flexbox`（弹性盒模型）或`grid`（网格布局）...
html多行多列交错布局,你肯定会用到的CSS多行多列布局
weixin_39713538的博客
06-16 859
前言：因为项目中使用flex过程中，如果采用space-between两端对齐，会遇到最后一行难以对齐的问题。本文主要对多行多列这种常见的布局，列出解决方案，方便大家日常开发使用。话不多说，直接进入正题：方案一：标签补位我们都知道，之所以对不齐是因为最后一行的子项目没有达到4个，space-between的对齐方式，自然会把中间空出来。既然如此，何不直接补位，让元素排满4个。.list{displ...
对于交叉轴的一些解析和认识
yp2294188167的博客
11-09 2163
交叉轴：主轴垂直方向，默认垂直 起点上面 设置元素在交叉轴上的对齐方式 flex-start 默认值 交叉轴起点 flex-end 交叉轴末端 center 居中 baseline 文本内容 基线对齐(文本对齐) stretch 子元素不设置高度，拉伸子元素高度到父元素内容高度 </div> <style> .wraper {...
div+css 网页布局基础
03-21 566
a:link a:hover a:visited 伪类 css中很有用的知识点 p.cls1{} p.cls2{} _____ 通配符选择器：*{margin 0px; padding 0px;} 四种选择器优先级： id选择器》class》html》通配符选择器 父子选择器：#id1 span{ color：red；} 1父子选择器可以运用到任何选择器中结合使用2不好超
div交错布局实现
qq_18887855的博客
06-30 1021
前端时间去面试,被问到如何实现如下布局,在网上查了很长时间没查到一个具体的解决方法,于是自己写了一个,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <...
html多行多列交错布局,css常用布局多行多列
weixin_34853336的博客
06-16 611
CSS布局常用的方法：float : none | left | right 取值： none :　 默认值。对象不飘浮 left :　 文本流向对象的右边 right :　 文本流向对象的左边 它是怎样工作的，看个一行两列的例子 xhtml: CSS布局常用的方法：float : none | left | right 取值： none :　 默认值。对象不飘浮 left :　 文本流向对象的右...
纯css3 弹性布局瀑布流
11-04
"纯css3 弹性布局瀑布流"是一个关于利用CSS3特性实现动态、响应式的页面布局方法，特别适合展示图片或者内容卡片，如电商产品展示、摄影网站等。这种布局方式被称为“瀑布流”或“Masonry布局”，因其元素像流水一样...
用CSS3实现瀑布流布局的示例代码
09-24
主要介绍了用CSS3实现瀑布流布局的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS3不规则瀑布流布局特效
04-02
1. **Flexbox（弹性盒布局）**：虽然瀑布流布局早期多依赖于JavaScript库实现，但随着CSS3的发展，我们可以利用Flexbox轻松构建出灵活的网格系统。通过设置`display: flex;`和`flex-wrap: wrap;`，可以实现元素的...
css3 column实现卡片瀑布流布局的示例代码
09-24
卡片瀑布流布局的实现不仅依赖于CSS3的`column`属性，还需要考虑到其他样式属性，如卡片的`display`、`margin`、`background`、`box-shadow`、`border-radius`等，以达到美观和功能性的双重需求。在实际开发中，为了...
纯CSS3实现瀑布布局
leeandmins的博客
09-29 775
以下是我用css实现的：         CSS3瀑布布局             .container{ -webkit-column-width:160px;                -moz-column-width:160px;                 -o-colum-width:160px;                
css 瀑布流布局_瀑布流布局实现方法
weixin_39815600的博客
11-23 250
最近有一个项目要做成瀑布流布局，研究了一下，想到两个方案，一个是使用css的flex，一个是使用masonry。这里先说一下flex的布局以下属性注意使用：1、column-count 把div中的文本分为多少列2、column-width 规定列宽3、column-gap 规定列间隙4、break-inside: avoid; ←在制作手机站瀑布流时候，会出现图片错乱，请使用这个属性：避免元素内...
使用CSS3属性Multi-columns实现瀑布流布局
Dilomen的博客
01-18 945
 使用CSS3属性Multi-columns实现瀑布流布局 主要属性： 父容器： column-count: 5;   规定的列数，设置5列 column-gap: 0;   规定的间隔距离 子容器： break-inside: avoid;   不允许插入任何中断(包括了avoid-page：禁止出现任何分页符，avoid-column：禁止任何列断裂，avoid-region：禁止任...
用CSS3实现响应式的瀑布流
wd
11-09 8849
前言：虽然瀑布流在现在不是很流行了，自己之前通过JavaScript和css3都实现过。这次做项目的时候又遇到了这个问题，就重新整理了一下，并把代码放出来分享一下<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .wate
纯CSS实现瀑布流布局
热门推荐
LuviaWu的博客
04-21 2万+
瀑布流布局有一个专业的英文名称Masonry Layouts。瀑布流布局已经有好多年的历史了，我最早知道这个名词的时候大约是在2012年，当时Pinterest网站的布局就是使用的这种流式布局，简言之像Pinterest网站这样的布局就称之为瀑布流布局，也有人称之为Pinterest 布局。瀑布流布局其核心是基于一个网格的布局，而且每行包含的项目列表高度是随机的（随着自己内容动态变化高度），同时每个
css 瀑布式布局（column-count实现）
PrimaryColor
09-16 262
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container { .
竖向瀑布流布局解析！
大大怪将军的开心星球
06-07 628
瀑布流是各种壁纸社区喜欢用的布局效果，精品的图片随着滚动条的下拉一张张从渲染出来，非常的好看。 作为一名前端工程师，我们工作中可能会遇到类似的这种需求，今天我就给大家剖析下瀑布流的整体思路。 因为这种效果可能牵扯到具体的公司需求，容器大约多少列、这种都不能统一，所以今天给大家分享下4列的设计原理，大家可以将这种编程的思路灵活的运用到自己的实际工作中。 当我们从后端发送ajax请求的时候，拼接完html结构(如果有同学喜欢原生的话，建议使用创建dom元素的方式，下面到时会解释!)，我们渲染所有结构，
开题报告达达宠物认领信息网站的设计与实现 已通过开题答辩的.docx
最新发布
07-25
宠物认领信息网站的主要目的是为寻找宠物的失主和寻找新家的宠物提供一个在线的信息交流平台。通过这个平台，失主可以发布失宠信息，寻找走失或遗弃的宠物；而救助人或组织则可以发布待领养的宠物信息，为那些无家可归的宠物寻找一个永久的归宿。 这样的网站通常会提供一个详细的宠物数据库，包括照片、品种、年龄、健康状况等信息，以便让失主能够方便地找到自己的宠物。同时，网站还会提供一些相关的服务，如失主与救助人之间的在线交流、宠物匹配推荐、领养手续办理等，以帮助双方顺利完成宠物的认领和领养过程。 宠物认领信息网站的目的在于提高失宠找到宠物的几率，减少流浪宠物的数量，并为那些无家可归的宠物提供一个温馨的新家。同时，网站还能促进社会对流浪宠物的关注和保护，提高人们的动物保护意识。
开题报告创权法律服务系统 已通过开题答辩的.doc
07-25
进入20世纪80年代，我国加快了改革开放的步伐，市场经济体制已逐步形成，我国的经济发展受世人所瞩目，但法律法规的置后，使经济发展不规范问题暴露的相当严重，特别是社会整体信用的缺失，使消费环境不断恶化。而如今随着城镇化的高速推进，精神追求远不及物质发展迅速，维权问题也越来越成为人们十分关注的社会话题。 维权是指维护个人或群体的合法权益，范围包括人身损害、土地纠纷、 医疗事故、婚姻、家庭、继承等民事纠纷所进行的行政及司法诉讼。维护消费者合法权益关系着全社会每个人的利益，群众利益无小事。维护消费者合法权益正体现着“权为民所用，利为民所谋”。而现如今由于法律规则的不完善加上自身对法律知识的不了解，导致很多公民的权益问题在复杂的社会情况下无法得到妥善的解决，使得公民的财产和心理受到难以弥补的损失，严重威胁到社会的安全与稳定，公民之间的诚信与统一。因此更便捷、迅速地维护公民的合法权益，已经成为了一个刻不容缓去解决的社会问题。
css grid布局实现瀑布流
05-25
使用 CSS Grid 布局可以实现瀑布流布局，具体步骤如下： 1. 在父元素上应用 grid 布局，将其划分为多个网格列，每一列的宽度相等，并且宽度可以根据需要进行调整。 2. 将子元素放置到网格中，使用 grid-row-start ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值