由于公司的项目需要才用到瀑布流布局

因为后台返回的json直接循环出来的,所以不能做左右浮动的那种,所以才用到了瀑布流布局

16年之前的瀑布流布局基本都时基于js或者直接用jq插件的,但是随着技术的进步或更新,想用纯css达到这样的效果也是可以的

话不多说直接上代码

CSS样式是

.waterfall{

    -moz-column-count:2; /* Firefox */

    -webkit-column-count:2; /* Safari 和 Chrome */

    column-count:2;

    -moz-column-gap: 30px;

    -webkit-column-gap: 30px;

    column-gap: 30px;
　　display:inline-block;

}

就结束了,是不是很简单,我也觉得有点出乎意料的简单,哈哈,反正是实现了

纯css瀑布流布局的更多相关文章

  1. 关于瀑布流的布局原理分析（纯CSS瀑布流与JS瀑布流）

    瀑布流 又称瀑布流式布局,是比较流行的一种网站页面布局方式.即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置. 为什么使用瀑 ...

  2. 分享：纯 css 瀑布流 和 js 瀑布流

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

  3. 纯js实现瀑布流布局及ajax动态新增数据

    本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...

  4. 页面瀑布流布局的实现 javascript+css

    先看所谓的瀑布流布局 在不使用瀑布流布局的情况下,当页面要显示不同高度的图片时,会如下面显示 下面的元素总是和最靠近它的元素对齐. 为了使元素能够在我们想要的位置上显示,我们使用绝对定位. 说一下大体 ...

  5. 纯css3打造瀑布流布局

    纯css3打造瀑布流布局 原理: 1.column-count 把div中的文本分为多少列 2.column-width 规定列宽 3.column-gap 规定列间隙 4.break-inside: ...

  6. 详解纯css实现瀑布流（multi-column多列及flex布局）

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

  7. 使用jquery+css实现瀑布流布局

    虽然可以直接使用css实现瀑布流布局,但显示的方式有点问题,所以这儿就直接使用jquery+css来实现瀑布流布局,最终效果如下:      思路是通过将每个小块的position设置为relativ ...

  8. 纯css实现瀑布流（multi-column多列及flex布局）

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

  9. 瀑布流的实现纯CSS实现Jquery实现

    瀑布流的实现 注:本文部分图片自百度下载,如有侵权,联系删图. 首先,选择几张图片布局到HTML内容中.HTML如下所示. <div class="wrapper"> ...

随机推荐

  1. CCPC-Wannafly Winter Camp Day4 Div1 - 置置置换 - [DP]

    题目链接:https://zhixincode.com/contest/18/problem/G?problem_id=265 题目描述 wls有一个整数 $n$,他想请你算一下有多少 $1...n$ ...

  2. 如果是多个 c 代码的源码文件，编译方法如下： $ gcc test1.c test2.c -o main.out $ ./main.out test1.c 与 test2.c 是两个源代码文件。

    如果是多个 c 代码的源码文件,编译方法如下: $ gcc test1.c test2.c -o main.out $ ./main.out test1.c 与 test2.c 是两个源代码文件.

  3. 【数据库】Invalid default value for 'create_date' timestamp field

    问题 最近遇到一个这样的问题,新建数据库表的时候 提示 错误如下 Invalid default value for 'created_time' timestamp field 语句如下 `crea ...

  4. adb devices offline的解决办法

    手机通过USB线连接电脑后,输入adb devices 识别为 offline,如图: 解决办法如下: (0) 换数据线.换主机后面的USB口先试一下 (1) 重启adb服务 adb kill-ser ...

  5. 那些年读过的书《Java并发编程的艺术》一、并发编程的挑战和并发机制的底层实现原理

    一.并发编程的挑战 1.上下文切换 (1)上下文切换的问题 在处理器上提供了强大的并行性就使得程序的并发成为了可能.处理器通过给不同的线程分配不同的时间片以实现线程执行的自动调度和切换,实现了程序并行 ...

  6. 第三节：Windows下检出项目和提交项目

    1.将项目下载到本地: 2.在客户端中,右键点击test,选择show in explorer: 然后修改日志文件并保存: 3.在客户端中填写备注并提交: 4.提交到github中:

  7. Uncontrolled memory mapping in camera driver (CVE-2013-2595)

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/hu3167343/article/details/34434235 /* 本文章由 莫灰灰 编写,转 ...

  8. 如何卸载VMware虚拟机？

    如何卸载VMware虚拟机? 1.windows + R  打开>运行-->regedit(打开编辑注册表)-->找到HKEY_LOCAL_MACHINE-->Software ...

  9. 有关java反射机制 小结

    111111111111 Class<?> cls = Class.forName("包名.类名"); Object o = cls.newInstance(); 22 ...

  10. Day6 Python常用的模块

    一.logging模块 一.日志级别 critical=50 error=40 waring=30 info=20 debug=10 notset=0 二.默认的日志级别是waring(30),默认的 ...