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

因为后台返回的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. [No0000ED]IPSec策略之管理

    IP安全策略 @echo off :again set num= set ippolicyname= set ismmpfs= set keytime= set keyexpress= set new ...

  2. SQL Fundamentals: 子查询 || WHERE,HAVING,FROM,SELECT子句中使用子查询，WITH子句

    SQL Fundamentals || Oracle SQL语言 子查询(基础) 1.认识子查询 2.WHERE子句中使用子查询 3.在HAVING子句中使用子查询 4.在FROM子句中使用子查询 5 ...

  3. [skill] 异或

    都怪学习不好,或者老师教的不好.虽然知道异或的算法,但是始终不明白,到底有什么意义...直到今天,终于明白了. 还是应该怪我学的不好,不能怪老师. 今天有一个应用场景,写一个函数.这是一个hash表的 ...

  4. java 大数据运算 BigInteger BigDecimal

    package cn.sasa.demo5; import java.math.BigDecimal; import java.math.BigInteger; public class BigDat ...

  5. 【PyQt5-Qt Designer】PyQt5+pyecharts 实现GUI界面的数据可视化展示

    先用纯Python代码写一个简单的小案例: from PyQt5.QtCore import QUrl from PyQt5.QtWidgets import QApplication,QWidget ...

  6. Javascript 对象复制(深浅拷贝)

    一.数据类型分类: 基本变量 引用类型 二.什么叫做指针指向 栈内存.堆内存.指针指向(如下红圈圈的斜线). 三.赋值.拷贝.引用区别? 赋值指一个变量赋予某个值,包含两种方式,一种是直接量,另一种, ...

  7. 用CSS来画空心三角形的方法

    画这里三角形的方法: 用CSS来实现:整个弹框的ID是#favoriteOptionMenus,对于#favoriteOptionMenus这个元素设置:before和:after的样式,让:befo ...

  8. centos7 管理开机启动：systemd

    一.CentOS7 systemd 介绍 在 CentOS7 中,使用 systemd 来管理其他服务是否开机启动,systemctl 是 systemd 服务的命令行工具 [root@mysql ~ ...

  9. 张小龙2018PRO版微信公开课演讲全文 透露2018微信全新计划

    大家好!我是张小龙.欢迎大家来到微信公开课. 刚刚出现的是我打游戏的画面,被大家看到了,那个不是我最好的水平,因为有点紧张,我最高分曾打到6000多分.当然我是练习了很久了,并不是我比大家更厉害,而是 ...

  10. GPT转MBR怎么转？

    GPT转MBR分区怎么转?现在很多笔记本的硬盘分区都是GPT模式,如果想装XP的话,那只能将GPT磁盘转换成MBR磁盘分区才行.接下来,简单说说如何将GPT分区转成MBR分区! 如果本身电脑有两个硬盘 ...