最近刚学js,看到瀑布流布局,于是模仿着跟着学习了一下,话不多说,开始记录。
(简单的文件的相对位置)
HTML和CSS的代码就不多说了,直接贴上来。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>瀑布流布局</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="main">
<div class="box">
<div class="pic">
<img src="../images/0.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/1.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/2.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/3.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/4.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/5.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/6.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/7.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/8.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/9.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/10.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/11.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/12.jpg" alt="">
</div>
</div>
<div class="box">
<div class