实现瀑布流加载图片

最新推荐文章于 2024-03-10 16:52:40 发布

TempleTem

最新推荐文章于 2024-03-10 16:52:40 发布

阅读量756

点赞数 1

CC 4.0 BY-SA版权

文章标签： html javascript js

本文链接：https://blog.csdn.net/TempleTem/article/details/106888666

瀑布流布局是一种流行的网站布局方式，常用于电商和网图网站。本文介绍了三种实现方法：1) 利用js，关注等宽不等高，通过设置定位实现；2) 使用column多行布局，借助column-count和column-gap属性；3) 采用flex弹性布局，通过调整flex-flow和width实现。每种方法都有详细的代码实现。

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

什么是瀑布流布局呢？

是比较流行的一种网站页面布局方式。视觉表现为参差不齐的多栏布局，最早采用此布局的是网站是Pinterest。页面容器内的多个高度不固定的div之间按照一定的间隔参差不齐的无序浮动，鼠标滚动时不断在容器内的尾部加载数据，且自动加载到空缺位置，不断循环。
现在我们常用的电商网站、网图网站多数会都采用了这种技术。具体效果如下图所示：
在这里插入图片描述
本文中总结三种瀑布流的写法，如下：

一、利用js实现瀑布流布局

注意：1.瀑布流布局的特点是等宽不等高。
2.为了让最后一行的差距最小，从第二行开始，需要将图片放在第一行最矮的图片下面，以此类推。
3.父元素设置为相对定位，图片所在元素设置为绝对定位。然后通过设置 top 值和 left 值定位每个元素。
代码实现：
HTML部分：

<div class="out">
    <div class="in">
        <img src="img/img1.jpg" alt="" width="280px">
    </div>
    <div class="in">
        <img src="img/img2.jpg" alt="" width="280px">
    </div>
    <div class="in">
        <img src="img/img3.jpg" alt="" width="280px">
    </div>
    <div class="in">
        <img src="img/img4.jpg" alt="" width="280px">
    </div>
</div>

css部分：

* {
   
   
    margin: 0;
    padding: 0;
}

.out {
   
   
    margin: 0 auto;
    width: 1200px;
    border: 1px solid #ab15fd;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: flex-start;
}

.in {
   
   
    width: 280px;
    text-align: center;
    line-height: 100px;
    font-size: 30px;
    color: #ab15fd;
    box-sizing: border-box;
}

img {
   
   
    width: 280px;
}

js部分：

// 获取4个放置图片的容器
var ins = document.getElementsByClassName("in");
// 定义数组，存放4个容器的高度
var arrHeight = [];
// 数组中的最小的高度
var minHeight

最低0.47元/天解锁文章

200万优质内容无限畅学