前端开发_HTML5_布局-流式布局

流式布局

1.引入

   上一次课中我们讲解了表格布局，但是我们也可以看出表格布局存在着很大的局限性，那就是当页面的内容比较多的时候我们发现是无法使用表格布局实现的，那么接下来我们学习一个比较重要的布局方式——流式布局。

2.流式布局

   流式布局是基于标准的文档流的布局模式，是页面默认的布局方式，除了对页面上的元素做了特殊的位置处理之外，任何元素都将默认为流式布局模式，即:从上到下，从左到右的方式进行排版。

   流式布局又称为百分比布局，是移动端开发中经常使用的布局方式之一。其具有以下的几个特征:宽度自适应，高度写死;并不是所有的内容都自适应。

3.经典的流式布局结构

   流式布局中总是需要有一端固定，而另一端则自适应，下面介绍几种常用的经典的流式布局结构。

   (1)、等分布局

   (2)、左侧固定(右侧固定)，右侧自适应(左侧自适应)

   (3)、两端固定，中间自适应。

4.瀑布流布局

   瀑布流布局是流式布局中比较流行的网站页面布局，我们在日常使用的APP中如手机淘宝、视频、图片显示的网站中都可以发现它的身影，因为在这一些网站页面中我们可以不断的刷新添加数据信息。如果说单纯的使用CSS样式去实现瀑布流布局是一个比较麻烦的事情，为了解决这一个问题，我们可以使用javascript提供的插件:masonary,它可以帮助我们快速的实现瀑布流布局。

5.一个简单的瀑布流布局实现

<style type="text/css">
			.containner{
				width: 1200px;
				margin: 0 auto;
			}
			
			.box{
				width: 200px;
				float: left;
			}
			
			.a{
				background-color: #00AA00;
				height: 200px;
			}
			.b{
				background-color: #ff55ff;
				height: 300px;
			}
			.c{
				background-color: #00007f;
				height: 500px;
			}
			.d{
				background-color: #aa007f;
				height: 350px;
			}
			.e{
				background-color: #ff5500;
				height: 150px;
			}
</style>

<div class="containner">
			<div class="box a">
			</div>
			<div class="box b">
			</div>
			<div class="box c">
			</div>
			<div class="box d">
			</div>
			<div class="box d">
			</div>
			<div class="box e">
			</div>
			
			<div class="box a">
			</div>
			<div class="box b">
			</div>
			<div class="box c">
			</div>
			<div class="box d">
			</div>
			<div class="box d">
			</div>
			<div class="box e">
			</div>
			</div>
		</div>
		
		<!--script-info-->
		<script src="js/masonry.pkgd.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var masonry = new Masonry('.containner',{
				itemSelector:'box',
				columnWidth:200
			});
</script>