html+css实现简单的图片瀑布流效果

最新推荐文章于 2024-08-11 02:49:42 发布

梁平欧文

最新推荐文章于 2024-08-11 02:49:42 发布

阅读量187

点赞数 1

文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_59108404/article/details/140749516

版权

在网页中搜索图片时，往往会以如下的图片瀑布流的方式展示：
在这里插入图片描述
接下来，用html和css实现一个简单的图片瀑布流效果：

<!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>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      /* 让div盒子一行展示8个 */
      column-count: 8;  
    }

    img {
      /* 设置图片的宽度为 100%，也就是div盒子的 1/8 */
      width: 100%;
      /* 图片的外边距 */
      margin: 15px;
      /* 设置图片的阴影 */
      box-shadow: 0 0 10px #eee;
      /* 设置图片的圆角 */
      border-radius: 10px;
      /* 添加过渡效果 */
      transition: .3s;
    }

    img:hover {
      /* 当鼠标悬停在图片上呈现放大效果 */
      transform: scale(1.25);
    }
  </style>
</head>
<body>
  <div>
    <img src="images/IMG_20240224_160843.jpg">
    <img src="images/IMG_20240608_182547.jpg">
    <img src="images/mmexport1691297679779.jpg">
    <img src="images/mmexport1691297684494.jpg">
    <img src="images/mmexport1691297688579.jpg">
    <img src="images/mmexport1691297690513.jpg">
    <img src="images/mmexport1691299218174.jpg">
    <img src="images/mmexport1691299220111.jpg">
    <img src="images/mmexport1691299221961.jpg">
    <img src="images/mmexport1691299223781.jpg">
    <img src="images/mmexport1691299225512.jpg">
    <img src="images/mmexport1691299227326.jpg">
    <img src="images/mmexport1691328876353.jpg">
    <img src="images/IMG_20240224_160843.jpg">
    <img src="images/IMG_20240608_182547.jpg">
    <img src="images/mmexport1691297679779.jpg">
    <img src="images/mmexport1691297684494.jpg">
    <img src="images/mmexport1691297688579.jpg">
    <img src="images/mmexport1691297690513.jpg">
    <img src="images/mmexport1691299218174.jpg">
    <img src="images/mmexport1691299220111.jpg">
    <img src="images/mmexport1691299221961.jpg">
    <img src="images/mmexport1691299223781.jpg">
    <img src="images/mmexport1691299225512.jpg">
    <img src="images/mmexport1691299227326.jpg">
    <img src="images/mmexport1691328876353.jpg">
    <img src="images/IMG_20240224_160843.jpg">
    <img src="images/IMG_20240608_182547.jpg">
    <img src="images/mmexport1691297679779.jpg">
    <img src="images/mmexport1691297684494.jpg">
    <img src="images/mmexport1691297688579.jpg">
    <img src="images/mmexport1691297690513.jpg">
    <img src="images/mmexport1691299218174.jpg">
    <img src="images/mmexport1691299220111.jpg">
    <img src="images/mmexport1691299221961.jpg">
    <img src="images/mmexport1691299223781.jpg">
    <img src="images/mmexport1691299225512.jpg">
    <img src="images/IMG_20240224_160843.jpg">
    <img src="images/IMG_20240608_182547.jpg">
    <img src="images/mmexport1691297679779.jpg">
    <img src="images/mmexport1691297684494.jpg">
    <img src="images/mmexport1691297688579.jpg">
    <img src="images/mmexport1691297690513.jpg">
  </div>
</body>
</html>