Vue 3砖石布局

Question

有没有人知道使用Vue 3和服务器端渲染的砖石布局？

我的要求是，我不能指定前面的列，我想要的砖石布局工作。

在我的Vue 2应用程序中，我使用了"vue-masonry“。我还不得不使用"vue-client-only“作为我的应用程序，因为我的应用程序是一个服务器渲染的应用程序。

  <!-- Only rendered during client side rendering, vue-masonry is not support in SSR -->
  <client-only>
    <div
      class="grid"
      v-masonry="containerId"
      transition-duration="0.3s"
      item-selector=".grid-item">
      <div
        v-masonry-tile class="grid-item"
        v-for="(item, i) in items"
        v-bind:key="i">
        <img
          :src="getItemImage(item)"
          :data-key=i
          alt="Small preview">
      </div>
    </div>
  </client-only>

当我在我的Vue 3项目中有这个的时候，我得到了错误

slot is not a function

我尝试过使用"vue-masonry-css“，但是失败了

Uncaught TypeError: Cannot read property 'use' of undefined

对于以下代码，

import Vue from 'vue';
import VueMasonry from 'vue-masonry-css';
Vue.use(VueMasonry);

Answer 1

我也在寻找一个具有SSR和Vue 3支持的砖石布局。因为我找不到我的用例，所以我创建了https://github.com/DerYeger/vue-masonry-wall。

请查看https://vue-masonry-wall.yeger.eu/上的演示，看看它是否符合您的要求。

Answer 2

我一直在寻找实现动态砖石布局的答案，但没有一种方法适合我，所以我不得不为我的博客页面开发自己的算法，甚至支持IE11和Edge浏览器。

1.网格布局应具有以下结构：

<div class="grid-container">
    <div class="grid-item">
        <div class="grid-item-content"></div>
    </div>
</div>

2.设置网格容器的样式：

.grid-container {
    min-width: 70%;
    max-width: 100%;
    display: grid;
    column-gap: 1rem;
    grid-template-columns: repeat( auto-fit, minmax(22em , 1fr));
    grid-auto-rows: 300px;
 }

.grid-item {
    height: fit-content;
    /*add the rest of your desired styling properties*/
 }

​

您可以更改容器的宽度，并为其分配任何您想要的值。

上面css代码片段中的另外两个重要属性是：

生成响应网格项的

• grid-template-columns，其最小宽度为22em，最大宽度等于网格容器1fr.
• grid-auto-rows属性的宽度，顾名思义，该属性隐式地给出行的高度。为了让我们的砖石布局算法起作用，我给出了在我的例子中网格项目可以具有的最小高度值。

3.以下js算法将在网格项目加载后对其进行调整，以实现砖石结构布局：##

​

resizeAllGridItems() {
    //calculate the grid container with
    let gridWidth = document.getElementsByClassName("grid-container")[0].offsetWidth;
    /*calculate the grid item width (the width should be the same for all grid items
    because we used `repeat( auto-fit, minmax(22em , 1fr))` to generate our responsive
    columns)*/
    let gridItemWidth = document.getElementsByClassName("grid-item")[0].offsetWidth;
    /*devide the with of the grid container by the with of the grid item item to get
    the number of generated columns*/
    let columnsNumber = ~~(gridWidth / gridItemWidth);

    /*the second part of the algorithm with loop through all the generated grid items.
    Starting with the second row, the grid item in that row will be given a `margin
    -top` value that equals the height of the grid item situated right above it, minus
    the value of `grid-auto-rows`. This way whenever there's an extra space, the grid
    item below will have it's `margin-top` value adjusted to take the extra space.*/
    let x = columnsNumber;
    let colIdx = 0;
    let columnsHeights = [0, 0, 0];
    let tempColumnsHeights = [];
    let allItems = document.getElementsByClassName("grid-item");
    for(x; x<allItems.length; x++) {
      let topItemHeight = columnsHeights[colIdx] + allItems[x - columnsNumber].offsetHeight;
      allItems[x].style.marginTop = (topItemHeight - 300) + 'px';
      tempColumnsHeights.push(topItemHeight - 300);
      colIdx++;

      /*move to the next row of grid items to adjust them if all the items of the
      previous row are adjusted*/
      if (colIdx === columnsNumber) {
        colIdx = 0;
        columnsHeights = tempColumnsHeights;
        tempColumnsHeights = [];
      }
    }
  }

​

就这样。现在你有了一个砖石布局，它是通过编程调整网格项目的页边距顶部，考虑到几个变量，如自动行的值，网格项目的高度，它们的宽度和网格容器的宽度。

我偶然看到了几篇文章，也解释了实现masonry布局的其他方法和算法，但它们对我不起作用。这篇来自css-Trick的article解释了很多实现砖石结构布局的方法。然而，我已经尝试了另外两种方法，但对我来说都不起作用：

• the first根据网格项目的高度和网格项目的内容来调整grid-row-end的值，以将网格项目跨越一行或多行。

注意，如果您正在使用带有图像元素的网格项目，请注意:我发现我尝试过的this article使用了imagesLoaded.js库。使用该库可以在加载所有图像后执行算法。在我的例子中，我给图片容器一个固定的高度，这样我的文章的卡片高度将独立于它所包含的图片。

IE11和边缘支持

使用autoprefixer npm包，这是一个PostCSS插件来解析CSS，并使用我可以使用的值向CSS规则添加供应商前缀。由Google推荐，并在Twitter和阿里巴巴使用。它会添加所有必要前缀，并解析IE11和edge的网格显示属性。您可以参考以下答案，了解如何使用自动修复程序启用网格支持，因为默认情况下该功能处于禁用状态：https://stackoverflow.com/a/61144097/8453311

Answer 3

在Vue 3中，有类似于Vue 2的no export global Vue instance。当我检查vue-masonry源代码时，他们使用了Vue global instance，Vue 2 directive API (breaking change in Vue 3)。

因此，我认为必须读取该库并将其移植到Vue 3才能使其正常工作。我遇到了同样的情况，仍然在寻找支持Vue 3的库。如果我找不到任何库，也许我会在接下来的2-3周内移植它。