Vue3+Quasar实现ins风格图片墙

在线Demo：

http://www.arthins.com
源码：https://github.com/hints0816/artblog

关键要点：

图片墙滚动加载
图片按照1大9小分布
图片间距自适应变化
鼠标悬停图片遮罩层

注：我这里的图片均为正方形

代码实现（具体实现看注释）

template

<template>
<!--Quasar类 内容居中 justify-center --><div class="row justify-center"><!--Quasar类 响应式宽度 --><q-page padding class="col-xs-12 col-sm-12 col-md-8 col-lg-6"><!--Quasar组件滚动加载 --><q-infinite-scroll @load="onLoad" :offset="200"><!--Quasar类 网格间距 --><div :class="outClass + ' row'"><!--对不同位置的图片进行样式处理 --><divv-for="(src, index) in images":key="index":class="loadClass(index)"><!--判断显示大图还是显示小图: 大图 --><template v-if="checkClass(index) == 0 || checkClass(index) == -1"><q-img@click="getDetail(src.id)"@mouseenter="alertNum = index"@mouseleave="alertNum = -1":src="src.url"><divalign="center"v-if="alertNum == index"class="relative-position cursor-pointer indexz"><divclass="absolute-center q-col-gutter-x-md"style="font-size: 2em"></div></div></q-img></template><!--判断显示大图还是显示小图: 小图 --><template v-if="checkClass(index) == 1"><!--上小图 --><div class="col-6"><q-img@click="getDetail(images[index].id)"@mouseenter="alertNum = index"@mouseleave="alertNum = -1":src="data:images[index].url"><divalign="center"v-if="alertNum == index"class="relative-position cursor-pointer indexz"><divclass="absolute-center q-col-gutter-x-md"style="font-size: 2em"></div></div></q-img></div><!--下小图 --><div class="col-6"><q-imgv-if="images[index + 1] != undefined"@click="getDetail(images[index + 1].id)"@mouseenter="alertNum = index + 1"@mouseleave="alertNum = -1":src="data:images[index + 1].url"><divalign="center"v-if="alertNum == index + 1"class="relative-position cursor-pointer indexz"><divclass="absolute-center q-col-gutter-x-md"style="font-size: 2em"></div></div></q-img></div></template></div></div><!--Quasar组件滚动加载 --><template v-slot:loading><div class="row justify-center q-my-md"><q-spinner-dots color="primary" size="40px" /></div></template></q-infinite-scroll></q-page></div>
</template>

script

<script lang="ts">
import { reactive, toRefs, onMounted, getCurrentInstance } from 'vue';
import { Screen } from 'quasar';
import { useRouter } from 'vue-router';
import {listArtList,getImgContent
} from '../../api/test/index';export default {setup() {const { ctx } = getCurrentInstance() as any;const router = useRouter() as any;let data = reactive({// 控制哪个图片的遮罩层大开alertNum: -1,// 最外层间距样式outClass: Screen.lt.lg? 'q-col-gutter-' + Screen.name: 'q-col-gutter-lg',// 竖向显示2个图片的样式inClass: Screen.lt.lg? 'q-col-gutter-y-' + Screen.name: 'q-col-gutter-y-lg',images: [],imgDetail: null,pagesize: 18,pagenum: 1,total: 18,});const method = {// 判断是否数字工具类checkNum(nums: number): boolean {const r = /^\+?[0-9][0-9]*$/;if (r.test(String(nums))) {return true;} else {return false;}},// Quasar滚动加载调用方法async onLoad(index, done): Promise<any> {if (data.total > data.pagesize*data.pagenum) {data.pagenum += 1;const paramss = {pagenum: data.pagenum,pagesize: data.pagesize,};let datas = (await listArtList(paramss)) as any;setTimeout(() => {datas.data.forEach((element: any) => {data.images.push({ url: element.imgurl, id: element.ID });});done();}, 2000);} else {done();}},// 根据图片位置返回class动态改变样式loadClass(nums: number): string {if (method.checkNum(nums / 9)) {if (method.checkNum(nums / 9 / 2)) {return 'col-8';} else {return data.inClass + ' column col-4';}} else if (method.checkNum((nums - 1) / 9)) {if (method.checkNum((nums - 1) / 9 / 2)) {return data.inClass + ' column col-4';} else {return 'nopadding';}} else if (method.checkNum((nums - 2) / 9)) {if (method.checkNum((nums - 2) / 9 / 2)) {return 'nopadding';} else {return 'col-8';}} else {return 'col-4';}},// 根据图片位置判断显示大图还是小图checkClass(nums: number): number {if (method.checkNum(nums / 9)) {if (method.checkNum(nums / 9 / 2)) {return 0;} else {return 1;}} else if (method.checkNum((nums - 1) / 9)) {if (method.checkNum((nums - 1) / 9 / 2)) {return 1;} else {return 2;}} else if (method.checkNum((nums - 2) / 9)) {if (method.checkNum((nums - 2) / 9 / 2)) {return 2;} else {return 0;}} else {return -1;}},// 分页查询async listArt(): Promise<any> {const paramss = {pagenum: 1,pagesize: data.pagesize,};let res = (await listArtList(paramss)) as any;res.data.forEach((element: any) => {data.images.push({ url: element.imgurl, id: element.ID });});data.total = res.total},async getDetail(id: number): Promise<any> {let res = (await getImgContent(id)) as any;data.imgDetail = res.data;}};// 初始化方法onMounted(async () => {await method.listArt();//监听窗口大小变化事件来改变间距大小ctx.$nextTick(() => {window.addEventListener('resize', () => {if (Screen.lt.lg) {(data.outClass = 'q-col-gutter-' + Screen.name),(data.inClass = 'q-col-gutter-y-' + Screen.name);}});});});return {...toRefs(data),...method,};},
};
</script>

style

<style lang="sass">
.nopaddingpadding: 0px
.indexzposition: fixedtop: 0left: 0bottom: 0right: 0width: 100%height: 100%background: rgba(0,0,0,0.8)
</style>

Vue3+Quasar实现ins风格图片墙相关推荐

itchat 保存好友信息以及生成好友头像图片墙
2019 第 41 篇,总第 65 篇文章本文大约 4000 字,阅读大约需要 12 分钟最近简单运用 itchat 这个库来实现一些简单的应用,主要包括以下几个应用: 统计保存好友的数量和信息 ...
flash 与分解分解百度MP3图片墙
打开这个百度MP3网站 http://mp3.baidu.com/ 下面可以看到一个flash相关的图片墙,这个图片墙能够显示歌手或者其他活动的信息,是一个实用的flash.flash显示了歌手的信息 ...
flash 与分解：分解百度MP3图片墙
打开这个百度MP3网站 http://mp3.baidu.com/ 下面可以看到一个flash相关的图片墙,这个图片墙能够显示歌手或者其他活动的信息,是一个实用的flash.flash显示了歌手的信息 ...
一键拼出你的微信好友图片墙！
点击"小詹学Python",选择"置顶"公众号重磅干货,第一时间送达本文转载自高级农民工,禁二次转载上午发了张微信近 2000 位好友的头像拼图,让大伙儿 ...
按钮图片拉伸_图片墙有多香？高手都在用的PPT封面制作技巧！
大家好,我是李导~ 这次,冬天是真的来了,不知道大家有没有感觉,每次冷空气真正袭来之前我们都会以为今年是个暖冬,结果突然有一天气温从20度直降到个位数,我们都会认为今年比以往的冬天都冷. 但是,再冷的 ...
html 图片墙效果,基于html5实现的图片墙效果
温馨提示:本信息由[金聪采编]搜集整理发布,版权归原作者及发布者所有,您如有异议请举报或者版权申诉. 本文实例讲述了基于html5实现的图片墙效果,分享给大家供大家参考.具体实现方法如下: 这里 ...
基于Web的浮动图片墙
个人博客:http://www.chenjianqu.com/ 原文链接:http://www.chenjianqu.com/show-33.html 直接上效果图: Html设计 <!DOCT ...
教你做炫酷的蜂巢式图片墙
之前博主写了几篇博文都是属于前端基础技术的总结,这个周末打算发布两到三篇博文来给大家点"干货". 之所以把话说这么早其实是想给自己点压力,免得又偷懒跳票了.... 几个月前浏览过一 ...
flash 与3D笔记：图片墙（1）
一: 方形的图片墙对3D还是一点也不熟悉,东拿西拿才把这个拼合的图片墙拼起来了,但是涉及到很多细节方面比较多.特别是rotationX rotationY之后的偏移问题,对构建存在一点问题.初步有一 ...

Vue3+Quasar实现ins风格图片墙

在线Demo：

关键要点：

代码实现（具体实现看注释）

template

script

style

Vue3+Quasar实现ins风格图片墙相关推荐

最新文章

热门文章