什么是瀑布流布局

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。

—引自百度百科

插件安装

• 官网下载

  https://masonry.desandro.com/

• CDN

  <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
  <!-- or -->
  <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>

• 包管理工具

  # bower
  $ bower install masonry --save
  
  #npm
  npm install masonry-layout --save
  
  #yarn
  yarn add masonry-layout

开始开发

初始化瀑布流实例

<template>
  <div class="container">
    <div class="item" v-for="item in 10">
      <img :src="getMockImagesURL()" alt="mock images">
    </div>
  </div>
</template>

<script lang="ts" setup>
import Masonry from 'masonry-layout';
import { onMounted } from 'vue';
let masonry;
onMounted(() => {
  document.body.setAttribute('style', '');
  masonry = new Masonry('.container', {
    itemSelector: '.item',//将以此选择器对应的元素作为瀑布流内容元素
    columnWidth: '.container .item',//将以此选择器对应的元素宽度作为瀑布流的列宽
    percentPosition: true,//支持百分比宽度
  });
});
//获取随机图片
function getMockImagesURL() {
  let arr = [200, 250, 300, 350, 400, 450];
  const width = arr[Math.ceil(Math.random() * 10) % 6];
  const height = arr[Math.ceil(Math.random() * 10) % 6];
  return `https://picsum.photos/${width}/${height}`;
}
</script>

<style>
.container { max-width: 1200px; margin: auto; }
.container .item { width: 33%; box-sizing: border-box; padding: 5px }
.container .item img { width: 100%; display: block; }
</style>

图片懒加载拓展

<template>
  <div class="container">
    <div class="item" v-for="(item, index) in imageList">
      <img @load="imgLoaded" :src="getMockImagesURL()" alt="mock images">
    </div>
  </div>
</template>

<script lang="ts" setup>
import Masonry from 'masonry-layout';
import { onMounted } from 'vue';
let masonry;
onMounted(() => {
  document.body.setAttribute('style', '');
  masonry = new Masonry('.container', {
    itemSelector: '.item',//将以此选择器对应的元素作为瀑布流内容元素
    columnWidth: '.container .item',//将以此选择器对应的元素宽度作为瀑布流的列宽
    percentPosition: true,//支持百分比宽度
  });
});
//获取随机图片
function getMockImagesURL() {
  let arr = [200, 250, 300, 350, 400, 450];
  const width = arr[Math.ceil(Math.random() * 10) % 6];
  const height = arr[Math.ceil(Math.random() * 10) % 6];
  return `https://picsum.photos/${width}/${height}`;
}
function imgLoaded(e) {
  masonry.layout();//重新布局
}
//每2秒加载2张图片
const imageList = ref(Array.from({ length: 5 }));
setInterval(() => {
  imageList.value.push(...Array.from({ length: 2 }));
  masonry.reloadItems(); //https://masonry.desandro.com/methods.html
}, 5000);
</script>

html完整代码：GitHub