用css实现瀑布流布局_column-count: 4; column-gap: 15px;-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_72030584/article/details/144826806

上效果

知识理解

column-count: 4; column-gap: 15px;实现固定四行瀑布流布局

columns: 200px auto;column-gap: 15px;由浏览器根据容器的宽度自动调整，尽可能一行多个200px宽度的列数

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>瀑布流布局示例</title>
  <style>
    .container {
      /* 设置列间距 */
      column-gap: 15px;
      /* column-count: 4; 固定列数 */
      /* 设置列宽和列数（列的数量由浏览器根据容器的宽度自动调整） */
      /* 设置列数 */
      columns: 300px auto;
      /* 禁用文本选择 */
      user-select: none;
    }

    .item {
      /* break-inside 用于控制元素是否可以在页面、列或区域的边界处被分割 */
      /* 当设置为 avoid 时，浏览器会尝试避免将元素的内容分割到不同的页面、列或区域中。这意味着整个元素内容尽可能保持在同一页面、列或区域内 */
      break-inside: avoid;
      /*  Safari 浏览器 */
      -webkit-column-break-inside: avoid;
      /*老版本浏览器 用于控制元素是否可以在页面、列或区域的边界处被分割*/
      page-break-inside: avoid;
      margin-bottom: 15px;
    }

    .item img {
      width: 100%;
      border-radius: 8px;
      display: block;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="container">
      <div class="item" v-for="(item, index) in list" :key="index">
        <img :src="`https://picsum.photos/${item}`" alt="随机图片">
      </div>
    </div>
  </div>
  <!-- 引入Vue库 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <script>
    const app=new Vue({
      el: '#app',
      data () {
        return {
          list: [
            "290/320",
            "190/370",
            "290/330",
            "250/410",
            "230/380",
            "260/370",
            "210/430",
            "290/310",
            "430/310",
            "390/440",
            "430/310",
            "390/440",
            "390/440",
          ]
        };
      }
    });
  </script>
</body>

</html>