不规则瀑布流图片墙
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3瀑布布局</title>
<style type="text/css" >
/*图片大小控制CSS By Tekin */
img,a img{
border:0;
margin:0;
padding:0;
max-width:690px;
width:expression(this.width>690?”690px”:this.width);
max-height:690px;
height:expression(this.height>690?”690px”:this.height)
}</style>
<style>
.container{
-webkit-column-width:160px;
-moz-column-width:160px;
-o-colum-width:160px;
-webkit-column-gap:1px;
-moz-column-gap:1px;
-o-column-gap:1px;
}
div:not(.container){
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
background:#D9D9D9;
border::#CCC 1px solid;
display:inline-block;
width:157px;
position:relative;
margin:2px;
}
.title{
line-height:80px; font-size:18px; color:#900;
text-align:center;
font-family:"Microsoft YaHei";
}
</style>
</head>
<body>
<section>
<div class="container">
<div style="height:80px" class="title">纯CSS3瀑布布局</div>
<div style="height:260px"> <img src="hotel-internazionale-facade-thumbnail.jpg" /></div>
<div style="height:65px"><img src="hotel-internazionale-facade-thumbnail.jpg" /></div>
<div style="height:120px"><img src="hotel-internazionale-facade-thumbnail.jpg" /></div>
<div style="height:145px"><img src="hotel-internazionale-facade-thumbnail.jpg" /></div>
<div style="height:90px"><img src="hotel-internazionale-facade-thumbnail.jpg" /></div>
<div style="height:145px"><img src="hotel-internazionale-facade-thumbnail.jpg" /></div>
<div style="height:160px"><img src="hotel-internazionale-facade-thumbnail.jpg" /></div>
<div style="height:65px"><img src="hotel-internazionale-facade-thumbnail.jpg" /></div>
<div style="height:230px"><img src="hotel-internazionale-facade-thumbnail.jpg" /></div>
<div style="height:140px"><img src="hotel-internazionale-facade-thumbnail.jpg" /></div>
<div style="height:85px"><img src="hotel-internazionale-facade-thumbnail.jpg" /></div>
<div style="height:20px"><img src="hotel-internazionale-facade-thumbnail.jpg" /></div>
<div style="height:145px"><img src="hotel-internazionale-facade-thumbnail.jpg" /></div>
<div style="height:50px"><img src="hotel-internazionale-facade-thumbnail.jpg" /></div>
<div style="height:65px"><img src="hotel-internazionale-facade-thumbnail.jpg" /></div>
<div style="height:230px"><img src="hotel-internazionale-facade-thumbnail.jpg" /></div>
<div style="height:140px"><img src="hotel-internazionale-facade-thumbnail.jpg" /></div>
<div style="height:85px"><img src="hotel-internazionale-facade-thumbnail.jpg" /></div>
<div style="height:20px"><img src="hotel-internazionale-facade-thumbnail.jpg" /></div>
<div style="height:145px"><img src="hotel-internazionale-facade-thumbnail.jpg" /></div>
<div style="height:50px"><img src="hotel-internazionale-facade-thumbnail.jpg" /></div>
<div style="height:145px"><img src="hotel-internazionale-facade-thumbnail.jpg" /></div>
<div style="height:160px"><img src="hotel-internazionale-facade-thumbnail.jpg" /></div>
<div style="height:240px"><img src="hotel-internazionale-facade-thumbnail.jpg" /></div>
</div>
</section>
</body>
</html>
效果图
