瀑布流布局实战【JavaScript版】

最新推荐文章于 2024-04-16 10:05:10 发布

VIP文章 cjuncjy

最新推荐文章于 2024-04-16 10:05:10 发布

阅读量205

点赞数

文章标签： JS CSS布局

本文链接：https://blog.csdn.net/cjuncjy/article/details/87898834

版权

最近刚学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