CSS多列布局（非瀑布流）
...大约 6 分钟
CSS多列布局（非瀑布流）
HTML
<link href='http://fonts.googleapis.com/css?family=Cutive' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Vast_Shadow' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<nav>
<ul> <li class="active"><a href="">Home</a></li>
<li><a href="">Company</a></li>
<li><a href="">Services</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Contact</a></li>
</ul></nav>
<h1><a href="">Responsive pin style</a></h1>
<div class="wrapper">
<div class="boxes">
<div class="box">
<div class="picPreview"><a href=""><img src="images/template21.jpg" alt="template21"></a></div>
<h2>FRT Mint</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since</p>
<div class="templateLink"><a href="">template 21</a></div>
</div> <div class="box">
<div class="picPreview"><a href=""><img src="images/template20.jpg" alt="template20"></a></div>
<h2>Michael & Julia</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since</p>
<div class="templateLink"><a href="">template 20</a></div>
</div> <div class="box">
<div class="picPreview"><a href=""><img src="images/template19.jpg" alt="template19"></a></div>
<h2>Birchwood</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since</p>
<div class="templateLink"><a href="">template 19</a></div>
</div> <div class="box">
<div class="picPreview"><a href=""><img src="images/template18.jpg" alt="template18"></a></div>
<h2>Maestro</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since</p>
<div class="templateLink"><a href="">template 18</a></div>
</div> <div class="box">
<div class="picPreview"><a href=""><img src="images/template17.jpg" alt="template17"></a></div>
<h2>Leader Horse Club</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since</p>
<div class="templateLink"><a href="">template 17</a></div>
</div> <div class="box">
<div class="picPreview"><a href=""><img src="images/template16.jpg" alt="template16"></a></div>
<h2>Portfolio</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since</p>
<div class="templateLink"><a href="">template 16</a></div>
</div> <div class="box">
<div class="picPreview"><a href=""><img src="images/template15.jpg" alt="template15"></a></div>
<h2>Miami</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since</p>
<div class="templateLink"><a href="">template 15</a></div>
</div> <div class="box">
<div class="picPreview"><a href=""><img src="images/template14.jpg" alt="template14"></a></div>
<h2>Yacht’s Florida</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since</p>
<div class="templateLink"><a href="">template 14</a></div>
</div> <div class="box">
<div class="picPreview"><a href=""><img src="images/template13.jpg" alt="template13"></a></div>
<h2>Children's Castle</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since</p>
<div class="templateLink"><a href="">template 13</a></div>
</div> <div class="box">
<div class="picPreview"><a href=""><img src="images/template12.jpg" alt="template12"></a></div>
<h2>Corn Food</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since</p>
<div class="templateLink"><a href="">template 12</a></div>
</div> <div class="box">
<div class="picPreview"><a href=""><img src="images/template11.jpg" alt="template11"></a></div>
<h2>Abc</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since</p>
<div class="templateLink"><a href="">template 11</a></div>
</div> <div class="box">
<div class="picPreview"><a href=""><img src="images/template10.jpg" alt="template10"></a></div>
<h2>Lage Palm</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since</p>
<div class="templateLink"><a href="">template 10</a></div>
</div> <div class="box">
<div class="picPreview"><a href=""><img src="images/template9.jpg" alt="template9"></a></div>
<h2>Zoo Co</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since</p>
<div class="templateLink"><a href="">template 9</a></div>
</div> <div class="box">
<div class="picPreview"><a href=""><img src="images/template8.jpg" alt="template8"></a></div>
<h2>frt _WheatField</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since</p>
<div class="templateLink"><a href="">template 8</a></div>
</div> <div class="box">
<div class="picPreview"><a href=""><img src="images/template7.jpg" alt="template7"></a></div>
<h2>frt_Auroch</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since</p>
<div class="templateLink"><a href="">template 7</a></div>
</div> <div class="box">
<div class="picPreview"><a href=""><img src="images/template6.jpg" alt="template6"></a></div>
<h2>Snail on the rain</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since</p>
<div class="templateLink"><a href="">template 6</a></div>
</div> <div class="box">
<div class="picPreview"><a href=""><img src="images/template5.jpg" alt="template5"></a></div>
<h2>Wood Selling Co</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since</p>
<div class="templateLink"><a href="">template 5</a></div>
</div> <div class="box">
<div class="picPreview"><a href=""><img src="images/template4.jpg" alt="template4"></a></div>
<h2>Quality Co</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since</p>
<div class="templateLink"><a href="">template 4</a></div>
</div> <div class="box">
<div class="picPreview"><a href=""><img src="images/template3.jpg" alt="template3"></a></div>
<h2>Flowers</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since</p>
<div class="templateLink"><a href="">template 3</a></div>
</div> <div class="box">
<div class="picPreview"><a href=""><img src="images/template2.jpg" alt="template2"></a></div>
<h2>Cooking School</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since</p>
<div class="templateLink"><a href="">template 2</a></div>
</div> <div class="box">
<div class="picPreview"><a href=""><img src="images/template1.jpg" alt="template1"></a></div>
<h2>Woman’s Laptop</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since</p>
<div class="templateLink"><a href="">template 1</a></div>
</div> </div> <div class="clearfloat"></div>
</div>
JavaScript
$(function() {
// Create the dropdown base
$("<select />").appendTo("nav");
// Create default option "Go to..."
$("<option />", {
"selected": "selected",
"value" : "",
"text" : "Select a page"
}).appendTo("nav select");
// Populate dropdown with menu items
$("nav a").each(function() {
var el = $(this);
$("<option />", {
"value" : el.attr("href"),
"text" : el.text()
}).appendTo("nav select");
});
// To make dropdown actually work
$("nav select").change(function() {
window.location = $(this).find("option:selected").val();
});
});
CSS
* {
margin:0;
padding:0;
}
body {
font-family: 'Karla', serif;
font-size:100%;
background: url(../images/siteBackground.jpg);
margin: 0;
padding: 0;
color: #5d5d5d;
text-shadow:0 0px, 1px 1px #ffffff;
}
h1 {
padding:20px 10px 30px 10px;
font-weight:inherit;
text-align:center;
}
h1 a {
font-size:1.2em;
color:#5d5d5d;
font-family: 'Merienda One', cursive;
text-decoration:none;
}
h2 {
font-family:'Courgette', cursive;
font-size:1.1em;
color:#5d5d5d;
font-weight:inherit;
padding:0 5%;
}
a img {
border: none;
}
a {
color: #1c6cbe;
text-decoration: underline; }
a:hover {
color: #1c6cbe;
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
width: auto; }
.wrapper {
width:93.75%;
margin:0 auto; }
header {
text-align:center;
}
.boxes {
-webkit-column-count: 5;
-webkit-column-gap: 10px;
-webkit-column-fill: auto;
-moz-column-count: 5;
-moz-column-gap: 10px;
-moz-column-fill: auto;
column-count: 5;
column-gap: 15px;
column-fill: auto;
}
.box {
width:95%;
background:#ffffff;
display: inline-block;
box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
margin:0 0 10% 0;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
.picPreview {
padding:5%;
}
.picPreview a:hover img {
box-shadow:0 0 12px 0 #45463d;
}
.box p {
padding: 5%;
}
.templateLink {
background:#dedede;
padding:5%;
text-align:center;
}
.templateLink a {
text-decoration:none;
}
footer {
text-align: center;
padding:30px 10px;
background:#dedede;
margin-top:20px;
}
footer p {
font-size:0.8571428571428571em; /* 12px/14px */
}
.clearfloat {
clear:both;
height:0;
line-height: 0px;
}
/**************************/
/*********************************Begin main menu****************************************/
/**************************/
nav {
background:#ffffff;
text-align:center;
padding:5px 0;
box-shadow:0 0 8px 0 #45463d;
}
nav li {
list-style:none;
display:inline;
padding:3px 10px;
}
nav li a {
font-size:1.2em;
color:#5d5d5d;
text-decoration: none;
font-family:'Courgette', cursive;
}
nav li a:hover {
color:#1c6cbe;
}
nav .active a {
color:#1c6cbe;
}
nav select {
display: none;
}
select {
width:200px;
}
/**************************/
/*********************************End main menu****************************************/
/**************************/
/*********************************Begin Media Queries****************************************/
/**************************/
/* for 960px or less */
@media screen and (max-width: 960px) {
.wrapper {
width:93.75%; /* 960px/1024px */
margin:0 auto;
}
}
/* for 768px or less */
@media screen and (max-width: 768px) {
.boxes {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
nav ul { display: none; }
nav select { display: inline-block; }
}
/* for 480px or less */
@media screen and (max-width: 480px) {
.boxes {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
h1 a {
font-size:0.7em;
}
}