HTML+CSS+JS实现图片的瀑布流布局_html横向瀑布流插件-优快云博客

本文链接：https://blog.youkuaiyun.com/Transprant/article/details/115744517

本文介绍如何实现瀑布流布局，通过HTML和CSS建立基础布局，然后使用JavaScript进行后续布局调整，确保图片按照瀑布样式排列。示例包括百度和淘宝的图片搜索布局，通过设置固定宽度和动态高度实现图片的自适应展示。

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

HTML+CSS+JS实现瀑布流布局

前言
一、总体效果
二、HTML+CSS简单布局
三、JS实现后续布局
总结

前言

瀑布流布局简而言之就是类似瀑布流的布局嘛，这么一讲大家可能还是不是了解的很明白，来来来，那现在我给大家上一个常见的实例:

在这里插入图相信大家在百度上搜索图片时的时候，网页图片的布局就是这样子的吧，什么？你还是不清楚瀑布流，那咱就再我看一个那没关系，淘宝大家应该再熟悉不过了吧片描述

相信大家在百度上搜索图片时的时候，网页图片的布局就是这样子的吧，什么？你还是不清楚瀑布流，那咱就再我看一个那没关系，淘宝大家应该再熟悉不过了吧!

在这里插入图片描述
我们可以发现图中每个商品框的高度不同的，因此导致我们的商品图片的高度布局都不在一个高度上。在百度搜索图片的时候我们发现每张图片的宽度都是不一样的那为什么所用图片的宽度它能刚刚好的占满一行呢?

这就是我今天今天教大家的布局方式——waterfall 布局，那该怎么实现呢？那我们就不多说啦，直接上干货!

一、总体效果

瀑布流的搭建完的效果如下：

二、HTML+CSS简单布局

首先大家在网上搜索一些图片或者用一下自己喜欢的图片均可，用html搭建好框架网页的框架将图片存放好，我们这里使用的了20张图为例。
其次使用html+css实现一个简单的布局，这有个关键的步骤：我们对比上面百度和淘宝页面的瀑布流布局就不难发现，要实现瀑布流所有图片都得有个相同的高度或者高度。因此我们这就给所用照片设置一个固定的宽度，但不限定的图片的高度保证每图片都按其原始比例完整展示出来。

HTML，CSS代码如下：

css代码

*{
   
   
          margin: 0;
          padding: 0;
      }
      #container{
   
   
          position: relative;
      }
      .box{
   
   
          float: left;/* 给每个存放照片box设置为浮动元素，让所有的图片浮动到网页的第一行*/
          padding: 5px;
      }
      .box-img{
   
   
          width: 150px;
          padding: 5px;
          border: 1px solid #ccc;
          box-shadow: 0 0 5px #ccc;
          border-radius: 5px;
      }
      .box-img img {
   
   
          width: 100%;
          height: auto;
      }

html代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>js 瀑布流</title>
 <link rel="stylesheet" href="./index.css">
</head>
<body>
  <div id="container">
    <div class="box">
      <div class="box-img">
        <img src="./img/1.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="box-img">
        <img src="./img/2.jpg" alt="">
      </div><