html:
要引入:
"jquery.min.js"
"jsliswall.js"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../lib/jquery-3.3.1.min.js"></script>
<script src="../lib/jsliswall.js"></script>
<link rel="stylesheet" href="../css/waterfall.css">
</head>
<body>
<div class="wall">
<a class="article" href="#">
<img src="../image/2.jpg">
<h2>GREEN</h2>
</a>
<a class="article" href="#">
<img src="../image/weChat.png">
<h2>WECHAT</h2>
</a>
<a class="article" href="#">
<img src="../image/1.jpg">
<h2>SUMMER</h2>
</a>
<a class="article" href="#">
<img src="../image/4.jpg">
<h2>FLOWER</h2>
</a>
<a class="article" href="#">
<img src="../image/3.jpg">
<h2>BORDER</h2>
</a>
<a class="article" href="#">
<img src="../image/5.jpg">
<h2>wall-item 6</h2>
</a>
<a class="article" href="#">
<img src="../image/6.jpg">
<h2>STREET</h2>
</a>
<a class="article" href="#">
<img src="../image/7.jpg">
<h2>LITCHI</h2>
</a>
<a class="article" href="#">
<img src="../image/8.jpg">
<h2>LOVE</h2>
</a>
<a class="article" href="#">
<img src="../image/9.jpg">
<h2>GRIL</h2>
</a>
<a class="article" href="#">
<img src="../image/10.jpg">
<h2>DOG</h2>
</a>
<a class="article" href="#">
<img src="../image/11.jpg">
<h2>PICTURE</h2>
</a>
</div>
<script>
$(function () {
$('.wall').jaliswall({ item: '.article' });
});
</script>
</body>
</html>
css:
watrefall.css:
* {
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
margin: 24px;
background: #f0f0f0;
color: #505050;
}
a {
text-decoration: none;
color: black;
}
.article {
display: block;
margin: 0 0 30px 0;
padding: 12px;
background: white;
border-radius: 3px;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
transition: all 220ms;
}
.article:hover {
box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.1);
transform: translateY(-5px);
transition: all 220ms;
}
.article > img {
display: block;
width: 100%;
margin: 0 0 24px 0;
}
.article h2 {
text-align: center;
font-size: 14px;
text-transform: uppercase;
margin: 0 0 12px 0;
}
.wall {
display: block;
position: relative;
}
.wall-column {
display: block;
position: relative;
/*width: 33.333333%;*/
width: 25%;
float: left;
padding: 0 12px;
box-sizing: border-box;
}
@media (max-width: 640px) {
.wall-column {
width: 50%;
}
}
@media (max-width: 480px) {
.wall-column {
width: auto;
float: none;
}
}
运行结果: