瀑布流布局思路

最新推荐文章于 2022-05-13 10:57:45 发布

小小小菜鸡zzzz

最新推荐文章于 2022-05-13 10:57:45 发布

阅读量544

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/ojb98K/article/details/106996498

版权

瀑布流布局创造不规则的展示效果，适用于特定场景。布局核心在于div元素的浮动和定位。首先获取所有div，设定统一宽度，按屏幕宽度计算列数。然后通过比较盒子高度，使用绝对定位进行排列，确保层次感。在加载更多内容时，依据最后盒子的位置和滚动距离动态追加元素。

摘要由CSDN通过智能技术生成

瀑布流布局是页面在展示时形成层次不齐的感觉，在特定的情况下使用此种布局

在这里插入图片描述

页面中的元素全是div，在这种布局中，使用浮动布局，加上定位。

思路：

获取所有的div元素
获取盒子的宽度，宽度都是相同，高度不同
在浮动布局中每一行的盒子个数不固定，是根据屏幕宽度和盒子宽度决定
获取屏幕宽度
求出列数，屏幕宽度 / 盒子宽度取整
瀑布流最关键的是第二行的盒子的排布方式，通过获取第一行盒子中最矮的一个的下标，绝对定位，top是最矮盒子的高度，left是最矮盒子的下标 * 盒子的宽度
循环遍历所有的盒子，通过列数找到第一行所有的盒子，将第一行盒子的高度放入数组，再取出数组中最小的一个的下标，就是第6步思路的第一行盒子中最矮盒子的下标。
循环继续，第二行第一个盒子，通过绝对定位，放进页面。
关键，需要将数组中最小的值加上放进的盒子的高度
继续循环，遍历所有
如果想要加载更多，需要判断最后一个盒子的高度和页面滚动的距离，再将数据通过创建元素，追加进页面，再通过瀑布流布局展示

* {
   
    margin: 0;
    padding: 0;
    list-style: none;
}

img {
   
    vertical-align: top;
}

html, body {
   
    width: 100%;
    height: 100%;
}

#main {
   
    position: relative;
}

.box {
   
    float: left;
    padding: 15px 0 0 15px;
    /*background-color: #f00;*/
}

.pic {
   
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 1px;
    background-color: #fff;
}

.pic img {
   
    width: 165px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>瀑布流布局</title>
  <link rel="stylesheet" href="css/index.css">
</head>
<body>

  <div id="main">
    <div class="box"><div class="pic"><img src="images/img01.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img02.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img03.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img04.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img05.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img06.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img07.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img08.jpg" alt=""></div></div>
    <div class="box