<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#geid {
width: 1000px;
margin: auto;
}
[class^=geid] {
width: 200px;
float: left;
}
.a {
height: 150px;
background-color: aqua;
}
.b {
height: 160px;
background-color: rgb(25, 0, 255);
}
.c {
height: 170px;
background-color: rgb(55, 71, 71);
}
.d {
height: 180px;
background-color: rgb(226, 41, 133);
}
.e {
height: 190px;
background-color: rgb(114, 117, 114);
}
.f {
height: 200px;
background-color: rgb(9, 209, 209);
}
.o {
height: 210px;
background-color: rgb(12, 27, 17);
}
.p {
height: 220px;
background-color: rgb(214, 236, 201);
}
.q {
height: 230px;
background-color: rgb(19, 17, 18);
}
</style>
<body>
<div id="geid">
<div class="geid-tie a"></div>
<div class="geid-tie b"></div>
<div class="geid-tie c"></div>
<div class="geid-tie d"></div>
<div class="geid-tie e"></div>
<div class="geid-tie f"></div>
<div class="geid-tie o"></div>
<div class="geid-tie p"></div>
<div class="geid-tie q"></div>
<div class="geid-tie a"></div>
<div class="geid-tie b"></div>
<div class="geid-tie c"></div>
<div class="geid-tie d"></div>
<div class="geid-tie e"></div>
<div class="geid-tie f"></div>
<div class="geid-tie o"></div>
<div class="geid-tie p"></div>
<div class="geid-tie q"></div>
<div class="geid-tie a"></div>
<div class="geid-tie b"></div>
<div class="geid-tie c"></div>
<div class="geid-tie a"></div>
<div class="geid-tie b"></div>
<div class="geid-tie c"></div>
<div class="geid-tie d"></div>
<div class="geid-tie e"></div>
<div class="geid-tie f"></div>
<div class="geid-tie o"></div>
<div class="geid-tie p"></div>
<div class="geid-tie q"></div>
<div class="geid-tie d"></div>
<div class="geid-tie e"></div>
<div class="geid-tie f"></div>
<div class="geid-tie o"></div>
<div class="geid-tie p"></div>
<div class="geid-tie q"></div>
</div>
<--jquery的版本都不差太多都可以使用-->
<!-- 引入js，jquery-1.11.3，masonry.pkgd -->
<script src="../../js/jquery-1.11.3.min.js"></script>
<script src="../../js/masonry.pkgd.min.js"></script>
<script>
window.onload = function(){
var nian = new Masonry('#geid', {
itemSelector: '.geid-tie',
columnWidth: 200
});
}
</script>
</body>
</html>
