瀑布流布局实战【JavaScript版】

最新推荐文章于 2024-05-19 13:20:40 发布

cjuncjy

最新推荐文章于 2024-05-19 13:20:40 发布

阅读量244

点赞数

文章标签： JS CSS布局

本文链接：https://blog.youkuaiyun.com/cjuncjy/article/details/87898834

版权

本文介绍了使用JavaScript实现瀑布流布局的过程，从HTML和CSS的基础设置到JavaScript代码的编写，详细讲解了瀑布流布局的思路和关键步骤。通过固定列数、设置图片宽度和高度，以及动态调整布局来实现瀑布流效果。同时，文章还讨论了如何通过监听滚动条动态加载更多图片，以适应实际网站需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

最低0.47元/天解锁文章