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

因为后台返回的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. [No000017D]改善C#程序的建议6：在线程同步中使用信号量

    所谓线程同步,就是多个线程之间在某个对象上执行等待(也可理解为锁定该对象),直到该对象被解除锁定.C#中对象的类型分为引用类型和值类型.CLR在这两种类型上的等待是不一样的.我们可以简单的理解为在CL ...

  2. Hadoop开发环境配置2-eclipse集成maven插件

    1.下载eclipse:eclipse-SDK-4.5-win32-x86_64.zip 下载地址: http://archive.eclipse.org/eclipse/downloads/drop ...

  3. 【基本功】Java动态追踪技术探究 不重启JVM，替换掉已经加载的类？不重启JVM，获知运行时对象的属性

    https://mp.weixin.qq.com/s/_hSaI5yMvPTWxvFgl-UItA 小结: 1.根据Java的类加载机制,在同一个ClassLoader中,类是不允许重复的: 2.单例 ...

  4. iPhone开发之使用NSUserDefaults存储数据

    NSUserDefaults是什么,有什么用处 对于应用来说,每个用户都有自己的独特偏好设置,而好的应用会让用户根据喜好选择合适的使用方式,把这些偏好记录在应用包的plist文件中,通过NSUserD ...

  5. mysql学习【第2篇】：MySQL数据管理

    狂神声明 : 文章均为自己的学习笔记 , 转载一定注明出处 ; 编辑不易 , 防君子不防小人~共勉 ! mysql学习[第2篇]:MySQL数据管理 外键管理 外键概念 如果公共关键字在一个关系中是主 ...

  6. 转：eval（data）和eval("("+data+")")

    http://www.w3school.com.cn/jsref/jsref_eval.asp JavaScript eval() 函数:eval() 函数可计算某个字符串,并执行其中的的 JavaS ...

  7. 转：JAVA守护线程

    原文地址:https://www.cnblogs.com/wxgblogs/p/5417503.html 详细内容看原文~  ,写的挺好的 在Java中有两类线程:User Thread(用户线程). ...

  8. Linux下MySql的配置文件my.cnf详细 讲解

    经常在使用MySql,但是对于MySql下面的各种参数的配置并不是很熟悉,经常在需要改变某项参数的时候,还要到处在网上查找,有点不方便.今天想把MySql下面的配置文件my.cnf详细的做一个说明(L ...

  9. onload和DOMContentLoaded

    执行时间 onload必须等到页面内包括图片的所有元素加载完毕后才能执行. DOMContentLoaded是DOM结构绘制完毕后就执行,不必等到加载完毕. 编写个数不同 onload不能同时编写多个 ...

  10. Qt获取QObject对应的类名并把它转为真实类型（使用obj->metaObject()->className() ）

    QObject是有窗口类的父类,比如QWidget,QLabel,QPushButton等都直接或间接继承自QObject类.如果把某个窗口中的所有控件都装到一个QList<QObject*&g ...