CSS3多列属性

h1{
width: 100%;
height: 50px;
margin: 0;
text-align: center;
line-height: 50px;
background-color: #fff;
box-shadow: 0 2px 6px 0 rgba(0,0,0,.5);
positionn: fixed;
left: 0;
top: 0;
}
.picC{
width: 90%;
margin: 50px auto;
-webkit-column-count: 4;
column-count: 4;
-webkit-column-gap: 50px;
column-gap: 50px;
list-style-tpye: none;
}
.picC li{
margin-top: 50px;
}

HTML CODE：

<h1>Image flow</h1>
<ul class="picC">
<li><img src="html.png"></li>
<li><img src="bg.jpg"></li>
<li><img src="html.png"></li>
<li><img src="bg.jpg"></li>
<li><img src="html.png"></li>
<li><img src="bg.jpg"></li>
<li><img src="html.png"></li>
<li><img src="bg.jpg"></li>
<li><img src="html.png"></li>
<li><img src="bg.jpg"></li>
</ul>