第一次做不等宽不等高的瀑布流布局,刚开始企图用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. pycharm快捷键、常用设置、包管理

    pycharm快捷键.常用设置.包管理 在PyCharm安装目录 /opt/pycharm-3.4.1/help目录下可以找到ReferenceCard.pdf快捷键英文版说明 or 打开pychar ...

  2. Oracle存储过程（转）

    Oracle存储过程基本语法 存储过程 1 CREATE OR REPLACE PROCEDURE 存储过程名 2 IS 3 BEGIN 4 NULL; 5 END; 行1: CREATE OR RE ...

  3. 解决Gradle编译时出现： 编码GBK的不可映射字符

    解决Gradle编译时出现: 编码GBK的不可映射字符 在build.gradle文件中加入如下内容: [compileJava, compileTestJava]*.options*.encodin ...

  4. UDP的connect函数

    UDP的connect没有三次握手过程,内核只是检测是否存在立即可知的错误(如一个显然不可达的目的地), 记录对端的的IP地址和端口号,然后立即返回调用进程. 未连接UDP套接字(unconnecte ...

  5. biweb添加新的模块

    1.例如添加一个新闻模块,首先去纯净的项目的根目录复制出一个news文件夹到项目外 2.打开dreamweaver, 编辑 ->查找和替换 例如 新模块 叫 我的新闻,英文名叫mynews,则进 ...

  6. 深入springMVC源码------文件上传源码解析(下篇)

    在上篇<深入springMVC------文件上传源码解析(上篇) >中,介绍了springmvc文件上传相关.那么本篇呢,将进一步介绍springmvc 上传文件的效率问题. 相信大部分 ...

  7. Java集合——ConcurrentHashMap

    集合是编程中最常用的数据结构.而谈到并发,几乎总是离不开集合这类高级数据结构的支持.比如两个线程需要同时访问一个中间临界区(Queue),比如常会用缓存作为外部文件的副本(HashMap).这篇文章主 ...

  8. Javascript学习笔记2.2 Javascript与DOM选项卡（滑动门）案例详解

    学习了DOM的知识,今天开始做些练习,想到了一个网页滑动门的特效,见下图: 1.通过建立索引实现 <!doctype html> <html> <head> < ...

  9. css学习归纳总结（一） 转

    原文地址:CSS学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00; } 3.属性 ...

  10. CentOS_7.2编译安装PHP_5.6.20添加扩展模块

    添加ZendGuardLoader扩展: # 解压ZendGuardLoader.so到"/usr/local/php/lib/php/extensions/no-debug-non-zts ...