瀑布流布局 vue

一种是使用纯 JavaScript 来实现,另一种是使用第三方库 Masonry.js

方案一:使用纯 JavaScript 实现

这种方法适用于想要完全控制瀑布流布局的情况。

步骤 1:HTML 结构

首先,在 HTML 中定义一个容器来存放瀑布流中的元素。

html 复制代码
<div id="waterfall">
  <!-- 瀑布流中的元素将动态插入到这里 -->
</div>
步骤 2:Vue 组件

接下来,创建一个 Vue 组件来处理瀑布流逻辑。

html 复制代码
<template>
  <div id="waterfall" ref="waterfall">
    <div v-for="(item, index) in items" :key="index" class="item" :style="{height: item.height + 'px'}">
      <img :src="item.src" :alt="item.alt" @load="onImgLoad(index)">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        // 示例数据
        { src: 'image1.jpg', height: 200, alt: 'image1' },
        { src: 'image2.jpg', height: 300, alt: 'image2' },
        // 更多数据...
      ],
      columns: []
    };
  },
  methods: {
    onImgLoad(index) {
      const item = this.items[index];
      const shortestColumn = this.columns.reduce((minCol, currentCol) => 
        currentCol.height < minCol.height ? currentCol : minCol, this.columns[0]);
      shortestColumn.height += item.height;
      shortestColumn.items.push(item);
      this.reorderColumns();
    },
    reorderColumns() {
      this.columns.sort((a, b) => a.height - b.height);
    },
    init() {
      const waterfall = this.$refs.waterfall;
      this.columns = [];
      this.items.forEach((item, index) => {
        const column = this.columns.length > 0 ? this.columns[0] : { height: 0, items: [] };
        const div = document.createElement('div');
        div.className = 'column';
        const img = document.createElement('img');
        img.src = item.src;
        img.alt = item.alt;
        img.onload = () => {
          item.height = img.offsetHeight;
          column.height += img.offsetHeight;
          column.items.push(item);
          this.reorderColumns();
          this.$forceUpdate(); // 强制更新视图
        };
        div.appendChild(img);
        waterfall.appendChild(div);
      });
    }
  },
  mounted() {
    this.init();
  }
}
</script>

<style scoped>
#waterfall {
  column-count: 3; /* 初始列数 */
  column-gap: 10px;
  margin: 0 auto;
  max-width: 900px;
}

.item {
  break-inside: avoid;
  page-break-inside: avoid;
  overflow: hidden;
}
</style>

方案二:使用 Masonry.js

如果你希望使用一个成熟的库来简化瀑布流的实现,可以选择 Masonry.js。

步骤 1:安装 Masonry.js

首先,你需要安装 Masonry.js:

vbscript 复制代码
npm install masonry-layout
步骤 2:引入 Masonry.js

然后,在你的 Vue 组件中引入 Masonry.js。

html 复制代码
<template>
  <div id="masonry" class="masonry">
    <div v-for="item in items" :key="item.id" class="item">
      <img :src="item.src" :alt="item.alt">
    </div>
  </div>
</template>

<script>
import Masonry from 'masonry-layout';

export default {
  data() {
    return {
      items: [
        // 示例数据
        { id: 1, src: 'image1.jpg', alt: 'image1' },
        { id: 2, src: 'image2.jpg', alt: 'image2' },
        // 更多数据...
      ]
    };
  },
  mounted() {
    this.initMasonry();
  },
  methods: {
    initMasonry() {
      this.msnry = new Masonry('#masonry', {
        itemSelector: '.item',
        columnWidth: '.item'
      });
      this.items.forEach(item => {
        this.$nextTick(() => {
          this.msnry.appended(document.querySelector(`[data-id="${item.id}"]`));
          this.msnry.layout();
        });
      });
    }
  }
}
</script>

<style scoped>
.masonry {
  column-count: 3; /* 初始列数 */
  column-gap: 10px;
  margin: 0 auto;
  max-width: 900px;
}

.item {
  break-inside: avoid;
  page-break-inside: avoid;
  overflow: hidden;
}
</style>
相关推荐
鸭梨大大大几秒前
Spring Web MVC入门
前端·spring·mvc
你的人类朋友几秒前
MQTT协议是用来做什么的?此协议常用的概念有哪些?
javascript·后端·node.js
吃没吃2 分钟前
vue2.6-源码学习-Vue 初始化流程分析 (src/core/instance/init.js)
前端
XH2764 分钟前
Android Room用法详解
前端
顽疲11 分钟前
从零用java实现 小红书 springboot vue uniapp (11)集成AI聊天机器人
java·vue.js·spring boot·ai
木木黄木木1 小时前
css炫酷的3D水波纹文字效果实现详解
前端·css·3d
美食制作家1 小时前
【无标题】Threejs第一个3D场景
javascript·three
派小汤1 小时前
Springboot + Vue + WebSocket + Notification实现消息推送功能
vue.js·spring boot·websocket
郁大锤1 小时前
Flask与 FastAPI 对比:哪个更适合你的 Web 开发?
前端·flask·fastapi
HelloRevit2 小时前
React DndKit 实现类似slack 类别、频道拖动调整位置功能
前端·javascript·react.js