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

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

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

  • 最终效果如下:

  • html基本布局如下:

  1. <body>
  2. 	<div class="container">
  3. 		<div class="box box0">
  4. 			<span class="item"></span>
  5. 			<div class="boxcontainer">
  6. 				<div class="box box01">
  7. 					<span class="item"></span>
  8. 					<span class="item"></span>
  9. 					<span class="item"></span>
  10. 					<span class="item"></span>
  11. 					<span class="item"></span>
  12. 				</div>
  13. 				<div class="box box02">
  14. 					<span class="item"></span>
  15. 					<span class="item"></span>
  16. 					<span class="item"></span>
  17. 					<span class="item"></span>
  18. 				</div>
  19. 			</div>
  21. 		</div>
  22. 		<div class="box box2">
  23. 			<span class="item"></span>
  24. 			<span class="item"></span>
  25. 			<span class="item"></span>
  26. 			<span class="item"></span>
  27. 			<span class="item"></span>
  28. 			<span class="item"></span>
  29. 		</div>
  30. 		<div class="box box3">
  31. 			<span class="item"></span>
  32. 			<span class="item"></span>
  33. 			<span class="item"></span>
  34. 		</div>
  35. 	</div>
  37. </body>
  • css样式如下:
  1. <style>
  2. 		.container{
  3. 			width: 710px;
  4. 			height: 1000px;
  5. 			margin: 50px auto;
  6. 			background-color: #eee;
  7. 			display: flex;
  8. 			flex-flow:row nowrap;
  9. 			justify-content:space-between;
  10. 			box-sizing:border-box;
  11. 			padding: 10px;
  12. 		}
  13. 		.box{
  14. 			box-sizing:border-box;
  15. 		}
  16. 		.box span{
  17. 			display: block;
  18. 			margin-bottom: 10px;
  19. 			width: 160px;
  20. 			box-sizing:border-box;
  21. 		}
  22. 		.box0 span{
  23. 			width: 330px;
  24. 			height: 150px;
  25. 			background-color: blue;
  26. 		}
  27. 		.boxcontainer{
  28. 			width: 330px;
  29. 			display: flex;
  30. 			flex-flow:row wrap;
  31. 			justify-content:space-between;
  32. 		}
  33. 		.boxcontainer span{
  34. 			width: 160px;
  35. 			background-color: orange;
  36. 		}
  37. 		.boxcontainer .box01 span{
  38. 			height: 80px;
  39. 			background-color: purple;
  40. 		}
  41. 		.boxcontainer .box02 span{
  42. 			height: 160px;
  43. 		}
  44. 		.box2 span{
  45. 			height: 100px;
  46. 			background-color: green;
  47. 		}
  48. 		.box3 span{
  49. 			height: 200px;
  50. 			background-color: pink;
  51. 		}
  53. 	</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. Jmeter压测环境准备

    Jmeter性能监控 配置好测试机器上的jmeter环境:http://jmeter-plugins.org/downloads/all/ 网站下载两个东西: JMeterPlugins-Standa ...

  2. 补PSP进度（10.28-11.3）

    本周PSP进度 10月31号 内容 开始时间 结束时间 打断时间 净时间 看蛋白质相互作用论文 8:40 10:35 约12m 103m 分析约跑功能 13:20 13:55 0 35m 练习VSL2 ...

  3. 张艾迪（创始人）： 整合全新的UIW.AD概念

    The World No.1 Girl :Eidyzhang The World No.1 Internet Girl :Eidyzhang AOOOiA.global Founder :Eidyzh ...

  4. vue的transition过渡效果

    需要4个类: *-enter: 进入的开始状态, *-enter-active: 进入的结束状态, *-leave: 离开的开始状态, *-leave-active: 离开的结束状态 vue-rout ...

  5. sessionStorage 、localStorage 与cookie 的异同点

    cookie 容量4kb,默认各种浏览器都支持,缺陷就是每次请求,浏览器都会把本机存的cookies发送到服务器,无形中浪费带宽.userdata,只有ie支持,单个容量64kb,每个域名最多可存10 ...

  6. 关于tomcat内路径跳转的一些思考

    初学jsp+servlet时经常碰上的几个错误:404.路径正确但页面没有任何内容.样式和图片丢失. 这几个错误曾经让我在debug时头大,现在总结一下,其实它们都跟路径有关,正是因为没有处理好路径跳 ...

  7. 深入浅出Mybatis系列（九）---强大的动态SQL

    上篇文章<深入浅出Mybatis系列(八)---mapper映射文件配置之select.resultMap>简单介绍了mybatis的查询,至此,CRUD都已讲完.本文将介绍mybatis ...

  8. java的前台与后台

    技术上:前台是指web展示,webservice接口等输入输出接口,后台是指支持这些接口的程序. 例如读写数据库,读写文件,业务逻辑处理. 业务上来讲:前台是提供给最终用户使用的界面,后台是指管理使用 ...

  9. [转载]来，让我们谈一谈Normalize.css

    来源 : http://segmentfault.com/a/1190000002239676 ---------------------------------------------------- ...

  10. css 分享之background-attachment 属性

    微分享才发现的css背景图达到的效果代码属性: background-attachment -- 定义背景图片随滚动轴的移动方式: 值 描述 scroll 默认值.背景图像会随着页面其余部分的滚动而移 ...