通过 Multi-columns 相关的属性 column-countcolumn-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实现瀑布流(纵向排序)的更多相关文章

  1. 详解纯css实现瀑布流(multi-column多列及flex布局)

    瀑布流的布局自我感觉还是很吸引人的,最近又看到实现瀑布流这个做法,在这里记录下,特别的,感觉flex布局实现瀑布流还是有点懵的样子,不过现在就可以明白它的原理了 1.multi-column多列布局实 ...

  2. 纯css实现瀑布流(multi-column多列及flex布局)

    瀑布流的布局自我感觉还是很吸引人的,最近又看到实现瀑布流这个做法,在这里记录下,特别的,感觉flex布局实现瀑布流还是有点懵的样子,不过现在就可以明白它的原理了 1.multi-column多列布局实 ...

  3. 简单CSS定位瀑布流实现方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. css布局-瀑布流的实现

    一.基本思路 1.先看最终的效果图: 2.实现原理:通过position:absolute(绝对定位)来定位每一个元素的位置,并且将当前列的高度记录下来方便下一个dom位置的计算 二.代码实现 1.版 ...

  5. 分别用js和css实现瀑布流

    下午查找了瀑布流的相关原理,找了一些css3实现的还有js实现的,最后总结了一些比较简单的,易懂的整理起来 1.css3实现 只要运用到    column-count分列 column-width固 ...

  6. 纯CSS实现瀑布流布局

    https://www.w3cplus.com/css/pure-css-create-masonry-layout.html

  7. 通过css 实现“瀑布流”

    .hot_list{-webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -moz-column-gap:7px; -webk ...

  8. css实现瀑布流

    <style>      .container{           column-width:250px;           -webkit-column-width:250px;   ...

  9. 分享:纯 css 瀑布流 和 js 瀑布流

    分享一次纯 css 瀑布流  和 js 瀑布流 纯 css 写瀑布流 1.multi-columns 方式: 通过 Multi-columns 相关的属性 column-count.column-ga ...

随机推荐

  1. 双非本科字节跳动Android面试题分享(已拿offer)

    基本情况 本人系非985非211普通本科生一枚,有实习有项目经历但成绩普通,在面试前刷了很多面经.面试题,这里也把自己的分享下,做个回报好了,顺便攒攒人品,一到这种时候人就迷信起来了. 面试是以视频面 ...

  2. .NET Core/.NET5/.NET6 开源项目汇总12:WPF组件库2

    系列目录     [已更新最新开发文章,点击查看详细] WPF(Windows Presentation Foundation)是微软推出的基于Windows 的用户界面框架,属于.NET Frame ...

  3. HCNA Routing&Switching之STP选举规则

    前文我们了解了二层环路对网络带来的影响,以及STP工作流程和BPDU数据包结构和相关字段的说明,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/15121317. ...

  4. MongoDB 批量插入和循环插入性能测试

    一万条数据批量插入和循环插入 循环插入 var startTime = (new Date()).getTime() var db = connect('log') for(var i = 0;i&l ...

  5. SpringBoot-技术专区-用正确的姿势如何用外置tomcat配置及运行(Tomcat优化分析)

    前提概要 在特别特殊的时候,我们可能需要外置tomcat去运行程序,例如alitomcat等特殊场景,方便我们去定时化开发项目或者其他特殊场景. 外置tomcat执行 pom.xml文件首先更改打包方 ...

  6. Color Theme of Emacs

    Choose color theme interactively: M-x customize-themes, or M-x color-theme-select (use key "q&q ...

  7. sqli-labs lesson1-4

    写在前面: 前四关基本都是基于GET的SQL注入 在Mysql中有一个系统数据库information_schema,存储着所有数据库的相关信息,一般利用这个数据库进行SQL注入. 因为大部分的注入需 ...

  8. SQL 练习9

    查询学过「张三」老师授课的同学的信息 SELECT Student.* from Student,Teacher,Course,SC WHERE Teacher.TId = Course.TId AN ...

  9. 微信小程序自定义顶部

    wxml <view style="height:{{titleHeight}}px;background:{{background}}" class="user- ...

  10. C#异步编程 Task await的理解

    async/await是C#5.0中推出的,先上用法: static void Main(string[] args) { Console.WriteLine("-------主线程启动-- ...