Dynamic Responsive Pinterest Style Columns Layout with Pure CSS
When Im searching for casarole layout I found the following which is really helped me.
I further improved and shared herewith.
http://www.cssscript.com/dynamic-responsive-pinterest-style-columns-layout-with-pure-css/
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery实现瀑布流效果</title>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script src="../js/jquery.js"></script>
<script src="../js/waterfalls.js"></script>
</head>
<body>
<section id="title">
<h2>jquery瀑布流效果特效代码</h2>
</section>
<div id="warp">
<div class="box">
<div class="pic">
<img src="../images/img_1.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/img_2.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/img_3.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/img_4.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/img_5.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/img_6.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/img_7.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/img_8.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/img_1.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/img_6.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/img_4.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/img_3.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/img_5.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/img_1.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/img_2.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/img_3.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/img_2.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/img_5.jpg" />
</div>
</div>
<div class="cl"></div>
</div>
</body>
</html>
CSS
*{
margin:0;
padding:0;
}
body{
margin:0;
padding:0;
background-color: #ddd;
}
img{
border:0;
}
a{
text-decoration: none;
color: #000;
}
.cl{
clear: both;
}
section{
text-align:center;
line-height: 60px;
}
#main{
-webkit-column-width:202px;
-moz-column-width:202px;
o-column-width:202px;
-ms-column-width:202px;
column-width:202px;
}
.box{
padding:10px 0 0 15px;
}
.pic{
padding:10px;
border: 1px solid #ccc;
width: 180px;
box-shadow: 0 0 5px #666;
border: 2px solid #FAFAFA;
}
.pic img{
width: 180px;
height: auto;
display: block;
}
#warp{
position: relative;
}
#warp .box{
float: left;
}
#content{
position: relative;
}
#content .box{
float: left;
}
I further improved and shared herewith.
http://www.cssscript.com/dynamic-responsive-pinterest-style-columns-layout-with-pure-css/
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery实现瀑布流效果</title>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script src="../js/jquery.js"></script>
<script src="../js/waterfalls.js"></script>
</head>
<body>
<section id="title">
<h2>jquery瀑布流效果特效代码</h2>
</section>
<div id="warp">
<div class="box">
<div class="pic">
<img src="../images/img_1.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/img_2.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/img_3.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/img_4.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/img_5.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/img_6.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/img_7.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/img_8.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/img_1.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/img_6.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/img_4.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/img_3.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/img_5.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/img_1.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/img_2.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/img_3.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/img_2.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/img_5.jpg" />
</div>
</div>
<div class="cl"></div>
</div>
</body>
</html>
CSS
*{
margin:0;
padding:0;
}
body{
margin:0;
padding:0;
background-color: #ddd;
}
img{
border:0;
}
a{
text-decoration: none;
color: #000;
}
.cl{
clear: both;
}
section{
text-align:center;
line-height: 60px;
}
#main{
-webkit-column-width:202px;
-moz-column-width:202px;
o-column-width:202px;
-ms-column-width:202px;
column-width:202px;
}
.box{
padding:10px 0 0 15px;
}
.pic{
padding:10px;
border: 1px solid #ccc;
width: 180px;
box-shadow: 0 0 5px #666;
border: 2px solid #FAFAFA;
}
.pic img{
width: 180px;
height: auto;
display: block;
}
#warp{
position: relative;
}
#warp .box{
float: left;
}
#content{
position: relative;
}
#content .box{
float: left;
}
Comments
Post a Comment