CSS 瀑布流图片简易实现

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
	  .waterfall {
	    column-count: 3;
	    column-gap: 10px;
	  }
	  .waterfall-item {
	    break-inside: avoid;
	    margin-bottom: 10px;
	    display: block;
	  }
	  .waterfall-item img {
	    width: 100%;
	    height: auto;
	    display: block;
	  }
	</style>
  </head>
  <body>
    <div class="waterfall">
      <div class="waterfall-item">
        <img src="img1.jpg" alt="" />
      </div>
      <div class="waterfall-item">
        <img src="img2.jpg" alt="" />
      </div>
      <div class="waterfall-item">
        <img src="img3.jpg" alt="" />
      </div>
    </div>
  </body>
</html>

使用 float: left(float常规浮动,高度固定、不铺满)

html 复制代码
<style>
  .waterfall {
    display: block;
    margin-right: -10px;
    margin-bottom: -10px;
  }

  .waterfall-item {
    float: left;
    height: 300px;
    margin-right: 10px;
    margin-bottom: 10px;
  }

  .waterfall-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>

使用 flex-wrap: wrap(flex常规浮动,高度固定)

html 复制代码
<style>
  .waterfall {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .waterfall-item {
    flex: 1;
    height: 300px;
    min-width: 200px;
    max-width: 500px;
  }

  .waterfall-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>

使用 column-count (列数固定,宽高自适应)

html 复制代码
<style>
  .waterfall {
    column-count: 3;
    column-gap: 10px;
  }
  .waterfall-item {
    break-inside: avoid;
    margin-bottom: 10px;
    display: block;
  }
  .waterfall-item img {
    width: 100%;
    height: auto;
    display: block;
  }
</style>

使用 Grid + grid-auto-flow: dense(列数变化,宽高自适应,每个item宽高相等)

html 复制代码
<style>
  .waterfall {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-auto-rows: 200px;
    grid-gap: 10px;
    grid-auto-flow: dense;
  }

  .waterfall-item {
    grid-row: span 1;
    overflow: hidden;
    border-radius: 8px;
  }

  .waterfall-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>

想要高可控效果可借助 javascrpit 脚本实现,列如:MasonryIsotopeJustified-GalleryPackerybricks.jsflexImagesjQuery-flexImageswaterfall

相关推荐
江城开朗的豌豆12 小时前
Redux 到底香不香?手把手教你状态管理与更新!
前端·javascript·react.js
写不出来就跑路12 小时前
电商金融贷款服务市场趋势与竞争分析
java·前端·人工智能
CocoaKier12 小时前
推荐一个网站,一句话生成网站应用和小程序
前端·ios·ai编程
江城开朗的豌豆12 小时前
React 性能优化必杀技:让你的应用飞起来!
前端·javascript·react.js
IT_陈寒12 小时前
Vue 3.4 性能飞跃:5个Composition API优化技巧让我的应用提速40%
前端·人工智能·后端
Bruce_Liuxiaowei13 小时前
基于BeEF的XSS钓鱼攻击与浏览器劫持实验
前端·网络安全·ctf·xss
yinuo13 小时前
解决微信小程序真机TextDecoder流式解析失败指南
前端
码了三年又三年14 小时前
【方舟UI框架】Navigation
前端·arkui
@HNUSTer14 小时前
基于 HTML、CSS 和 JavaScript 的智能图像虚化系统
开发语言·前端·javascript·css·html