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

因为后台返回的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. Codeforces 777C - Alyona and Spreadsheet - [DP]

    题目链接:http://codeforces.com/problemset/problem/777/C 题意: 给定 $n \times m$ 的一个数字表格,给定 $k$ 次查询,要你回答是否存在某 ...

  2. CH 2601 - 电路维修 - [双端队列BFS]

    题目链接:传送门 描述 Ha'nyu是来自异世界的魔女,她在漫无目的地四处漂流的时候,遇到了善良的少女Rika,从而被收留在地球上.Rika的家里有一辆飞行车.有一天飞行车的电路板突然出现了故障,导致 ...

  3. [No0000130]WPF 4.5使用标记扩展订阅事件

    自从我上次写到关于标记扩展的时候已经有一段时间了...... Visual Studio 11 Developer Preview的发布给WPF带来了一些新功能,让我有理由再次使用它们.我要在这里讨论 ...

  4. 3-idiots hdu4609 母函数+FFT 组合数学题

    http://acm.hdu.edu.cn/showproblem.php?pid=4609 题意:1e5个数,求取三个数能形成三角形的概率. 题解(这怎么会是fft入门题QAQ): 概率的算法就是三 ...

  5. SQL Server 2008 事件探查器（SQL SERVER Profiler）

    要想很好地优化ERP系统,可以从客户端.服务器.网络等入手,对于我们M1系统的优化来说,SQL 语句的优化就起到很重要的作用了.为此,我们展开,学习了SQL SERVER 2008的事件探查器(SQL ...

  6. 变长编码表 ASCII代码等长编码

    小结: 1.ASCII编码.GBK编码不是变长编码: 2.数据压缩: 示例: aabacdab → 00100110111010 → |0|0|10|0|110|111|0|10| → aabacda ...

  7. DevExpress前端组件库

    适用于为.Net环境(也有dephi版本,其他环境未知)下 WinForm\WebForm\ASP MVC的前端扩展组件,帮助生成高度windows office统一风格的界面. 在winform下, ...

  8. PHP进阶-网络编程基础概念

    以太网协议图: 以太网协议: 发送header(发送至mac地址,接收者mac地址).data到网线中所有连接的计算机,然后每个机子接收数据包的时候都是用以太网协议的, 然后解析header头,看是否 ...

  9. [cloud][sdn] neutron了解

    了解 neutron 文档:https://yeasy.gitbooks.io/openstack_understand_neutron/content/ LB讲的不细.DVR讲的不清晰. 读了全文之 ...

  10. [UI] UI things

    反正我不懂. 但是很酷. https://facebook.github.io/react/ https://cn.vuejs.org/ https://angular.cn/