Vue3实现小红书瀑布流布局任意组件动态更新页面方法实践

iamBailey

于 2025-01-24 10:30:42 发布

阅读量582

点赞数 11

文章标签： vue3 瀑布流小红书动态布局

本文链接：https://blog.csdn.net/leyouBaloy/article/details/145337065

版权

思路

1.首先定义一个瀑布流容器，它的高度暂定（后面会更新）。把需要布局的组件（这里叫做waterfall-item）放在瀑布流容器里面渲染出来。使用绝对定位（position: absolute），把它移到屏幕外面，不要占用页面高度，并且设置不可见（visibility:hidden）。

<div class="waterfall-container" ref="waterfallWrapper" :style="{ height: wrapperHeight + 'px' }">
    <div
      v-for="(post, index) in posts"
      :key="post.title"
      class="waterfall-item"
    >
      <div class="waterfall-card">
        <PostCard
          :title="post.title"
          :content="post.excerpt"
          :time="new Date(post.date).toLocaleDateString()"
          :tag="post.tags ? post.tags.join(', ') :

最低0.47元/天解锁文章