第一次做不等宽不等高的瀑布流布局,刚开始企图用ccs3的column属性+flexbox来实现,瞎捣鼓半天都没有能弄好,

弱鸡哭晕在厕所(┬_┬),气的午饭都没有吃.

后来逼着自己冷静下来,又捣鼓了1个小时,终于搞定了!!!长舒一口气(๑•ᴗ•๑)把代码分享给大家,希望能帮到小白:-D

  • 最终效果如下:

  • html基本布局如下:

<body>
<div class="container">
<div class="box box0">
<span class="item"></span>
<div class="boxcontainer">
<div class="box box01">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
<div class="box box02">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
</div> </div>
<div class="box box2">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
<div class="box box3">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
</div> </body>
  • css样式如下:
<style>
.container{
width: 710px;
height: 1000px;
margin: 50px auto;
background-color: #eee;
display: flex;
flex-flow:row nowrap;
justify-content:space-between;
box-sizing:border-box;
padding: 10px;
}
.box{
box-sizing:border-box;
}
.box span{
display: block;
margin-bottom: 10px;
width: 160px;
box-sizing:border-box;
}
.box0 span{
width: 330px;
height: 150px;
background-color: blue;
}
.boxcontainer{
width: 330px;
display: flex;
flex-flow:row wrap;
justify-content:space-between;
}
.boxcontainer span{
width: 160px;
background-color: orange;
}
.boxcontainer .box01 span{
height: 80px;
background-color: purple;
}
.boxcontainer .box02 span{
height: 160px;
}
.box2 span{
height: 100px;
background-color: green;
}
.box3 span{
height: 200px;
background-color: pink;
} </style>

flexbox实现不等宽不等高的瀑布流布局的更多相关文章

  1. Ajax+json+jquery实现无限瀑布流布局

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. AJAX+json+jquery实现预加载瀑布流布局

    宽度是一定的高度不定的瀑布流布局 也可以说是无缝拼图 当浏览器滚动到底部时候自动加载图片 加载的图片地址用json 在img.js里 ,还有正在加载动画是用 css3制作的 在ff等支持css3可以显 ...

  3. 获取jsp页面的宽和高

    var winWidth; var winHeight; function getResult() { if(window.innerWidth) { winWidth=window.innerWid ...

  4. StringGrid 实例3: 本例功能: 1、修改 TStringGrid的默认宽与高; 2、添加行; 3、确认当前单元并赋值.

    实例3: 本例功能: 1.修改 TStringGrid的默认宽与高; 2.添加行; 3.确认当前单元并赋值. 实例图形:

  5. Android中获取图片的宽和高

    在Android中,我们想获取图片的宽和高应该怎么办?一.正常加载图片的方法下获取宽和高 举一个简单的例子:创建一个图片的副本 //加载原图 Bitmap bmSrc = BitmapFactory. ...

  6. 【转】Android 获得view的宽和高

     转自:http://blog.csdn.net/yangdeli888/article/details/25405263 Android 获得view的宽和高 分类: android 技术点项目20 ...

  7. [BS-01] 根据字符串对象的参数自动计算用来显示该字符串的UI控件的宽和高

    根据字符串对象的参数自动计算用来显示该字符串的UI控件的宽和高 1.  影响昵称Label的高和宽的因素: 字体和字号大小.文字多少.高度取决于是否固定了宽度(是否限制了最大的宽度和高度) 2. 使用 ...

  8. iOS 修改网络图片的大小 宽和高

    //image宽和高 好用 NSString *strTemplateHTML = [NSString stringWithFormat:@"<html><head> ...

  9. C# 上传图片前判断上传图片的宽和高

    网上找了好久没有找到... 最后百度到了这句话“由上传的HttpPostFile的InputStream创建一个Image对象,然后想怎么处置就随便你了”. HTML代码: <asp:FileU ...

随机推荐

  1. gulp 基本使用

    1, gulp 依赖node, 使用gulp 之前,要先安装node.  Node 安装完成后,它自带npm. Npm: node package manager 就是node 包管理器. 用过jav ...

  2. 老王讲自制RPC框架.(三.ZOOKEEPER)

    (#)定义Zookeeper 分布式服务框架是 Apache Hadoop 的一个子项目,它主要是用来解决分布式应用中经常遇到的一些数据管理问题,如:统一命名服务.状态同步服务.集群管理.分布式应用配 ...

  3. json_encode 中文乱码

    用PHP的json_encode来处理中文的时候, 中文都会被编码, 变成不可读的, 类似"\u***"的格式, 还会在一定程度上增加传输的数据量. 而在PHP5.4, 这个问题终 ...

  4. MYSQL 模糊查询

    下面介绍mysql中模糊查询的四种用法: 1,%:表示任意0个或多个字符.可匹配任意类型和长度的字符,有些情况下若是中文,请使用两个百分号(%%)表示. 比如 SELECT * FROM [user] ...

  5. 如何让nginx显示文件夹目录

    1. 如何让nginx显示文件夹目录 vi /etc/nginx/conf.d/default.conf 添加如下内容: location / {           root /data/www/f ...

  6. Name jdbc is not bound in this Context

    简介 今天接手中行一个交通罚款web工程时,从svn同步下来后,,启动竟然报找不到数据源错误,本来以为很简单解决找了两个小时,现在记录下来. Exception: Name jdbc is not b ...

  7. vue的选项

    这篇是我自己看着方便整理的,请直接看官方api:http://cn.vuejs.org/v2/api/ 数据 data,props,computed 注意,不应该使用箭头函数来定义计算属性函数 (例如 ...

  8. SAP LOGON DATA CHECK

    之前有朋友做过RFC登录验证,后来群里又有很多人问SAP的登录验证函数. 后来自己找找了,看看了,然后改写了一个LOGON DATA CHECK... FUNCTION ZUSER_CHECK_LOG ...

  9. hexo deploy出错的解决方法

    .ERROR Deployer not found: git 执行npm install hexo-deployer-git --save .$ hexo d INFO Deploying: git ...

  10. 神奇的margin之豆瓣豆瓣么么哒

    在经过周末的豆瓣主页和这周的豆瓣电影,表示网页什么的已经被我玩坏了. 老师在周末布置豆瓣主页,对于只学了四天的css和html的我,表示鸭梨山大. 最开始的两个小时只能做出一个连自己都看不下去的导航栏 ...