search

heikaimu / vue3-waterfall-plugin

vue3 瀑布流插件，支持 PC 和移动端，支持 animate 的所有动画效果，支持图片懒加载
https://vue3-waterfall.netlify.app/
461 stars 34 forks source link

关于列表卡片样式问题 #60

Closed blackomilk closed 7 months ago

blackomilk commented 7 months ago

业务场景是，进入页面时根据图片的宽高计算瀑布流每个card的高度。但是计算完高度后图中红框圈起来的用户信息部分就只能使用绝对定位现在是最上层，如果不使用绝对定位就会被图片挤出父元素的可视范围。怎么才能让图片跟用户信息部分并列显示呢

image
heikaimu commented 7 months ago

我案例的这种？https://heikaimu.github.io/vue3-waterfall-plugin/#/page-a

blackomilk commented 7 months ago

我案例的这种？https://heikaimu.github.io/vue3-waterfall-plugin/#/page-a

对，差不多这种的展示效果

heikaimu commented 7 months ago

那你可以看看我example里面的代码。

blackomilk commented 7 months ago

那你可以看看我example里面的代码。

没有计算卡片高度不会引起卡片折叠吗，我这边如果进页面显示列表之前不计算卡片应该显示的高度的话就会折叠或者重排一下。

heikaimu commented 7 months ago

只要不是图片，一般来说不会被折叠，你的那个头像小图标写好宽度高度就行。

blackomilk commented 7 months ago

只要不是图片，一般来说不会被折叠，你的那个头像小图标写好宽度高度就行。

image

我说的折叠是卡片容器会重叠，然后滑动到这块的时候卡片容器才移动到正确位置去，能看到移动这个动作。加上计算卡片容器高度的逻辑就不会这样了。但是卡片容器高度一进来就算好了，图片就占满了卡片容器，导致用户头像那一行信息被挤出卡片容器了

heikaimu commented 7 months ago

布局计算在列表第一次富值的时候就会执行，这个时候会获取容器的高度，这个时候如果你里面的内容是文字这些，高度是能获取到的。只有图片这种在没有完全加载好的时候没法正确的获取到位置。你容器内如果有div块，并且块的高度写死了，这种也都是能在第一时间拿到的。

------------------ 原始邮件 ------------------ 发件人: @.>; 发送时间: 2024年4月7日(星期天) 下午2:54 收件人: @.>; 抄送: @.>; @.>; 主题: Re: [heikaimu/vue3-waterfall-plugin] 关于列表卡片样式问题 (Issue #60)

只要不是图片，一般来说不会被折叠，你的那个头像小图标写好宽度高度就行。 image.png (view on web) 我说的折叠是卡片容器会重叠，然后滑动到这块的时候卡片容器才移动到正确位置去，能看到移动这个动作。加上计算卡片容器高度的逻辑就不会这样了。但是卡片容器高度一进来就算好了，图片就占满了卡片容器，导致用户头像那一行信息被挤出卡片容器了 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: @.***>

heikaimu commented 7 months ago

你说的“计算卡片容器高度的逻辑”是什么代码？

blackomilk commented 7 months ago

你说的“计算卡片容器高度的逻辑”是什么代码？ <Waterfall :list="picList" :gutter="0" class="pic_list" :breakpoints="{ 999999: { rowPerView: 9 }, 5100: { rowPerView: 8 }, // 6144 4240: { rowPerView: 7 }, // 5120 3200: { rowPerView: 6 }, // 3840 2150: { rowPerView: 5 }, // 2560 1690: { rowPerView: 5 }, // 1920 1310: { rowPerView: 4 }, // 1536 1210: { rowPerView: 4 }, // 1440 989: { rowPerView: 3 }, 768: { rowPerView: 2 }, // ipad 550: { rowPerView: 1 }, // phone }" :animationDelay="0" :animationDuration="0" :crossOrigin="false" :hasAroundGutter="false" ref="masonry" animationPrefix="animated" v-if="picList.length"

<template #item="{ item }"> <div class="item" @click="toPicDetail(item)" v-if="item.img_url"> <div class="works" v-if="item.size.showHeight" :style="{ height: item.size.showHeight + 'Px' }"

<LazyImg :url="url + item.img_url" ref="lazyImg" />

这是我这边的代码，容器高度计算就是class=“works”那个div的高度，以下是计算容器高度的代码，根据屏幕的宽度以及显示的列数，求出卡片容器显示的宽度，然后再按照比例计算出高度 let picView = document.querySelector(".pics"); let picViewWidth = picView?.getBoundingClientRect().width; if (picViewWidth < 550) { imgNum.value = 1; } else if (picViewWidth > 550 && picViewWidth <= 768) { imgNum.value = 2; } else if (picViewWidth > 768 && picViewWidth <= 989) { imgNum.value = 3; } else if (picViewWidth > 989 && picViewWidth <= 1210) { imgNum.value = 4; } else if (picViewWidth > 1210 && picViewWidth <= 1690) { imgNum.value = 5; } else if (picViewWidth > 1690 && picViewWidth <= 3200) { imgNum.value = 6; } else if (picViewWidth > 3200 && picViewWidth <= 4240) { imgNum.value = 7; } else if (picViewWidth > 4240 && picViewWidth <= 5100) { imgNum.value = 8; } else { imgNum.value = 9; } let gap = (imgNum.value - 1) * 16; let imgWidth = (picViewWidth - 16 - gap) / imgNum.value; picList.value.map((e) => { let imgScale = Number((e.size.width / imgWidth).toFixed(1)); e.size.showHeight = Number((e.size.height / imgScale).toFixed(1)); });

blackomilk commented 7 months ago

你说的“计算卡片容器高度的逻辑”是什么代码？

image
heikaimu commented 7 months ago

把user-info放works容器外面去

blackomilk commented 7 months ago

把user-info放works容器外面去

好了，感谢

heikaimu commented 7 months ago

👌

heikaimu commented 7 months ago

已解决