CSS001. 纯CSS实现瀑布流(纵向排序)
通过 Multi-columns 相关的属性 column-count
、column-gap
配合 break-inside
来实现瀑布流布局。
首先对包裹图片的盒子增加样式,column-count
表示瀑布流列的数量;column-gap 表示瀑布流列的间隔
:
.img-container {
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
-moz-column-gap: 18px;
-webkit-column-gap: 18px;
column-gap: 18px;
display:inline-block;
}
接着设置瀑布流的宽度、行的间距以及瀑布高度不够时的断点:
.img {
width: 240px;
height: auto;
margin-bottom: 8px;
-moz-page-break-inside: avoid;
-webkit-column-break-inside: avoid;
break-inside: avoid;
}
最后别忘记通过媒体监听来进行瀑布流的响应式处理:
@media screen and (max-width: 1024px) {
.img-container {
-moz-column-count:2 !important; /* Firefox */
-webkit-column-count:2 !important; /* Safari 和 Chrome */
column-count:2 !important;
}
} @media screen and (max-width: 768px) {
.img-container {
-moz-column-gap: 8px !important;
-webkit-column-gap: 8px !important;
column-gap: 8px !important;
}
}
最终效果如下图:
* 由于这种方法只能实现纵向的排序方式,一般应用于少量的图片展示。如果是需要滚动刷新那样大量数据的应用场景,对用户来说这样的体验是很不好的,需要通过JS实现左至右排序的瀑布流布局。
- END -
CSS001. 纯CSS实现瀑布流(纵向排序)的更多相关文章
- 详解纯css实现瀑布流(multi-column多列及flex布局)
瀑布流的布局自我感觉还是很吸引人的,最近又看到实现瀑布流这个做法,在这里记录下,特别的,感觉flex布局实现瀑布流还是有点懵的样子,不过现在就可以明白它的原理了 1.multi-column多列布局实 ...
- 纯css实现瀑布流(multi-column多列及flex布局)
瀑布流的布局自我感觉还是很吸引人的,最近又看到实现瀑布流这个做法,在这里记录下,特别的,感觉flex布局实现瀑布流还是有点懵的样子,不过现在就可以明白它的原理了 1.multi-column多列布局实 ...
- 简单CSS定位瀑布流实现方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css布局-瀑布流的实现
一.基本思路 1.先看最终的效果图: 2.实现原理:通过position:absolute(绝对定位)来定位每一个元素的位置,并且将当前列的高度记录下来方便下一个dom位置的计算 二.代码实现 1.版 ...
- 分别用js和css实现瀑布流
下午查找了瀑布流的相关原理,找了一些css3实现的还有js实现的,最后总结了一些比较简单的,易懂的整理起来 1.css3实现 只要运用到 column-count分列 column-width固 ...
- 纯CSS实现瀑布流布局
https://www.w3cplus.com/css/pure-css-create-masonry-layout.html
- 通过css 实现“瀑布流”
.hot_list{-webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -moz-column-gap:7px; -webk ...
- css实现瀑布流
<style> .container{ column-width:250px; -webkit-column-width:250px; ...
- 分享:纯 css 瀑布流 和 js 瀑布流
分享一次纯 css 瀑布流 和 js 瀑布流 纯 css 写瀑布流 1.multi-columns 方式: 通过 Multi-columns 相关的属性 column-count.column-ga ...
随机推荐
- openssl查看证书命令
openssl x509部分命令打印出证书的内容:openssl x509 -in cert.pem -noout -text打印出证书的系列号openssl x509 -in cert.pem -n ...
- JS的FileSaver在Chrome上保存失败
在使用JavaSript的FileSaver保存文件时,IE11上好的,chrome上反没响应,不能保存文件.寻找了半天,最好发现是因为在FileSaver之外还有一个自定义的全局URL变量,把这个U ...
- vue源码解析之响应式原理
关于defineReactive等使用细节需要自行了解 一些关键知识点 $mount时 会 new Watcher 把组件的 updateComponent 方法传给watcher 作为getter ...
- SpringBoot开发五-社区首页开发
需求介绍-社区首页 根据之前的学习,我们一般都是先按照DAO->Service->Controller这个顺序去开发 分布实现: 开发社区首页,显示前十个帖子. 开发分页组件,分页显示所有 ...
- brew换源
转自:https://blog.csdn.net/gorwayne/article/details/107359912 第一步,替换brew.git cd "$(brew --repo)&q ...
- Linux文件系统只读 解决方案:
Linux系统Read-only file system,文件系统只读排查解决方案:文件系统只读机制:当文件系统自身的校验机制发现文件系统存在问题时,为避免文件系统受到进一步的损坏,系统会把文件系统设 ...
- Java之JSTL标签与JavaBean
Java之JSTL标签与JavaBean JSP.JSTL标签及 EL表达式 <!-- jstl表达式--> <dependency> <groupId>javax ...
- STM32—中断详解(配合按键中断代码,代码亲测)
在STM32中执行中断主要分三部分: 1.配置NVIC_Config()函数 2.配置EXTI_Config()函数 3.编写中断服务函数 (注:本文章所用代码为中断按键代码,实现了按键进入中断从而控 ...
- docker-compose部署mysql,redis,rabbitmq
version: '3' services: mysql: image: mysql:5.7.31 container_name: mysql restart: always command: --c ...
- visual studio如何检查内存泄露?
Visual Studio有专门的插件叫做Visual Leak Detector (VLD)Visual Leak Detector for Visual C++ 2008/2010/2012/20 ...