瀑布流的一些CSS实现方式
一个选择是用CSS3的多列columns，可以参考这篇文章。但这篇文章给的例子并不怎么好理解，我做了一些更改，在每个元素上加了序号。可以看到，多列布局是在每一列上依次排列元素的，第一列排完才开始排第二列，因为这里规定了4列，会尽量把元素数量均分到每一列。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
.box{
height: 123px;
padding: 1em;
margin-top: 1em;
break-inside: avoid;
border: 1px solid #000;
background: #ccc;
}
.spe{
height: 225px;
}
.box-wrapper{
column-count:4;
column-gap: 1em;
} *{
box-sizing:border-box;
}
.ggg{
height: 100%;
overflow-wrap: break-word
}
</style>
<body>
<div class="box-wrapper">
<div style="margin-top:0px" class="box">1</div>
<div class="box spe">2</div>
<div class="box spe">3</div>
<div class="box spe">4</div>
<div class="box spe">5</div>
<div class="box spe">6</div>
<div class="box spe">7</div>
<div class="box spe">8</div>
<div class="box spe">9</div>
<div class="box">10</div>
<div class="box">11</div>
<div class="box spe">12</div>
<div class="box spe">13</div>
<div class="box spe">14</div>
<div class="box spe">15</div>
<div class="box spe">16</div>
<div class="box spe"></div>
<div class="box spe"></div>
<div class="box spe"></div>
<div class="box spe"></div>
<div class="box spe"></div>
<div class="box ggg">ssssdsdsdajj</div>
</div>
</body>
</html>
另外一种方式是使用flex，可以参考这篇文章 关于flex实现的更多细节没有再探究，目前项目中也没有遇到该类需求，把精力放在JS需求上。
瀑布流的一些CSS实现方式的更多相关文章
- 瀑布流的三种实现方式（原生js+jquery+css3）
前言 项目需求要弄个瀑布流的页面,用的是waterfall这个插件,感觉还是可以的,项目赶就没自己的动手写.最近闲来没事,就自己写个.大致思路理清楚,还是挺好实现的... 原生javascript版 ...
- 用原生JavaScript实现图片瀑布流的浏览效果
学习JS,活跃思维,灵活运用的一个较为典型的学习案例.同一个瀑布流的效果但实现方式却很多,利用递归.冒泡等等手法都可以达到你想要的目的.这次要说的就是利用类似递归来实现此效果的原创方案.此方案个人认为 ...
- 移动端三合一瀑布流插件（原生JS）
没有前言,先上DEMO(手机上看效果更佳)和 原码. 瀑布流形式的图片布局方式在手机等移动端设备上运用广泛,比较常见的是下面前两种: 一.等宽等高 这种形式实现起来非常容易,这里就不再多说. 二.等宽 ...
- vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多
一.思路分析和效果图 用vue来实现一个瀑布流效果,加载网络图片,同时有下拉刷新和上拉加载更多功能效果.然后针对这几个效果的实现,捋下思路: 根据加载数据的顺序,依次追加标签展示效果: 选择哪种方式实 ...
- jQuery无限载入瀑布流 【转载】
转载至 http://wuyuans.com/2013/08/jquery-masonry-infinite-scroll/ jQuery无限载入瀑布流 好久没更新日志了,一来我比较懒,二来最近也比较 ...
- 分享：纯 css 瀑布流 和 js 瀑布流
分享一次纯 css 瀑布流 和 js 瀑布流 纯 css 写瀑布流 1.multi-columns 方式: 通过 Multi-columns 相关的属性 column-count.column-ga ...
- 关于瀑布流的布局原理分析（纯CSS瀑布流与JS瀑布流）
瀑布流 又称瀑布流式布局,是比较流行的一种网站页面布局方式.即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置. 为什么使用瀑 ...
- 瀑布流的实现纯CSS实现Jquery实现
瀑布流的实现 注:本文部分图片自百度下载,如有侵权,联系删图. 首先,选择几张图片布局到HTML内容中.HTML如下所示. <div class="wrapper"> ...
- 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍
01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline ...
随机推荐
- 编程——C语言的问题,比特率
1;; bps是bits per second的缩写,是指传输速度,音乐采样速度等,表示为: 比特/秒.
- 【Codeforces Round #445 (Div. 2) D】Restoration of string
[链接] 我是链接,点我呀:) [题意] 给你n个字符串. 让你构造一个字符串s. 使得这n个字符串. 每个字符串都是s的子串. 且都是出现次数最多的子串. 要求s的长度最短,且s的字典序最小. [题 ...
- 【CS Round #48 (Div. 2 only)】Dominant Free Sets
[链接]h在这里写链接 [题意] 让你在n个点组成的集合里面选取不为空的集合s. 使得这里面的点没有出现某个点a和b,ax>=bx且ay>=by; 问你s的个数. [题解] 我们把这些点按 ...
- Spring Boot + Jersey
Jersey是一个很好的Java REST API库.当你用Jersey实现REST的时候.是很自然的.同一时候Spring Boot是Java世界中还有一个很好的工具.它降低了程序的应用配置(< ...
- js进阶 12-14 jquery的事件触发函数是哪两个
js进阶 12-14 jquery的事件触发函数是哪两个 一.总结 一句话总结:trigger和triggerHandler 1.trigger传额外参数时候的注意事项是什么? 注意样例中是三个参数 ...
- eclipse调试鼠标放上去显示变量值
在eclipse中调试时,鼠标移动到变量上不显示值,这个原来自己也遇到过,没注意,反正就使用ctrl+shift+i嘛,也可以的,刚查了一下,解决方法如下: Window->Preference ...
- HDU 1210 Eddy's 洗牌问题（foj1062) || FOJ1050 Number lengths水
麻痹,感冒了. ------------------------------------------------感冒了的分割线------------------------------------- ...
- 【9204】第k小整数
Time Limit: 10 second Memory Limit: 2 MB 问题描述 现有n个整数,n≤10000,要求出这n个正整数中的第k个最小整数(相同大小的整数只计算一次),k≤1000 ...
- [CSS] Manipulate Images Using CSS Filter and Blend Modes
Apply filters like blur, brightness, saturation and hue to images. Combined with CSS blend modes, yo ...
- 【24.91】【Tsinsen 1302】&【BZOJ 2626】JZPFAR
时间限制:5.0s 内存限制:256.0MB 总提交次数:547 AC次数:137 平均分:40.31 将本题分享到: 查看未格式化的试题 提交 试题讨论 试题来 ...