Vue3使用Masonry插件实现瀑布流布局

瀑布流Vue前端插件

2023年01月06日 16:07:263014

什么是瀑布流布局

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

—引自百度百科

//cdn.shiniest.cn/static/202301/瀑布流.png

插件安装

  • 官网下载

    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

赞 4
收藏
分享

本作品系 原创,作者:你不熟悉的x先生

原文链接:https://shiniest.cn/blog/article/154

文本版权:文本版权归作者所有

转载需著名并注明出处(禁止商业使用)

评论和回复

0/500
  • avatar

    _笙

    (2023-01-30)

    用来用去,还是js实现方式最完美~

    • avatar

      205418367

      (2023-03-23)

      老哥 求js实现源码, 跪求啊 。。。

    • avatar

      你不熟悉的x先生@205418367

      (2023-03-29)

      这篇文章就是介绍Js实现方案的,这个插件就是基于Js计算实现瀑布流的。你要自己造轮子吗?插件源码npm上面有。

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

D&D By x先生 With