vue.js 组件css_由CSS驱动的Vue.js砌体布局组件

vue.js 组件css

Vue砌体CSS (vue-masonry-css)

Vue.js Masonry layout component powered by CSS, dependancy free

由CSS提供支持的Vue.js砌体布局组件，无依赖

A new masonry component powered by CSS to be fast loading and free of jQuery or other dependencies. Build specifically for Vue.js projects.

一个由CSS驱动的新砌体组件，可快速加载并且没有jQuery或其他依赖项。 专为Vue.js项目构建。

View demo 查看演示 Download Source 下载源

😎为什么？ (😎 Why?)

Existing solutions like Vue wrapped DeSandro Masonry, while great had downfalls in our Vue app. It required rendering the DOM on load and on during resize before determining the layout which lead to a slow, laggy experiance ..which in our case would occasionally break the layout completely during resize. While being feature packed it showed in the large resulting file size of the JS.

现有的解决方案(如Vue)包装了DeSandro Masonry，而我们的Vue应用程序则发生了重大故障。 在确定布局之前，需要在加载时以及在调整大小时呈现DOM，这会导致缓慢，缓慢的体验..在我们的情况下，这有时会在调整大小时完全破坏布局。 在进行功能打包时，它显示了JS产生的较大文件大小。

To combat this, we looked into the latest techniques using just CSS, including flexbox & css grid which fell short for anything other than basic images. CSS columns came the closest though the ordering reflow (orders down each column before reflowing to the next) visually broke when working with large different sized elements.

为了解决这个问题，我们研究了仅使用CSS的最新技术，包括flexbox和css网格，这些网格除了基本图像以外​​没有其他功能。 CSS列是最接近的，尽管在使用较大的不同大小的元素时，排序重排(在重排到下一个列之前先降序排列)在视觉上中断了。

Plain ol, div columns to the rescue!

普通ol，div列可进行救援！

vue-masonry-css Is a Vue Component with a simple interface to order items into the desired columns at specified breakpoints. With minimal CSS this leads to a quick, reliable solution that also has great browser support along with fast rendering performance ..just as Vue.js intended.

vue-masonry-css是一个Vue组件，具有简单的界面，可以在指定的断点处将项目排序到所需的列中。 只需最少CSS，就可以提供一种快速，可靠的解决方案，该解决方案还具有强大的浏览器支持以及快速的渲染性能..正是Vue.js想要的。

🏳️这不是做什么 (🏳️ What doesn't this do)

• Animate when sorting (..we're keeping it simple here)

  排序时动画(..我们在这里保持简单)

• Work with elements of different widths

  使用不同宽度的元素

• Box algorithm (not really needed if your elements have the same width)

  Box算法(如果元素具有相同的宽度，则不需要)

• Break when resizing (at least, thats the goal!)

  调整大小时要打破(至少就是目标！)

• Load and render the DOM before sorting out the layout <= actually thats the plus!

  在整理布局<=之前，先加载并渲染DOM，实际上多数民众赞成在加分！

this这是做什么的 (😄 What does this do)

• Responsive! ..always

  React灵敏！ ..总是

• IE 9+ CSS Support

  IE 9+ CSS支持

• Depedancy & jQuery free

  Depedancy和jQuery免费

• CSS powered (Fast loading & Performant)

  CSS驱动(快速加载和高性能)

• Gutters

  天沟

Usage简单用法 (😲 Simple Usage)

Add vue-masonry-css to your project:

将vue-masonry-css添加到您的项目中：

By script..

通过脚本

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-masonry-css"></script>

Or as a module... npm install vue-masonry-css --save-dev

或作为一个模块... npm install vue-masonry-css --save-dev

import Vue from 'vue'
import VueMasonry from 'vue-masonry-css'

Vue.use(VueMasonry);

In your HTML template...

在您HTML模板中...

<masonry
  :cols="3"
  :gutter="30"
  >
  <div v-for="(item, index) in items" :key="index">Item: {{index + 1}}</div>
</masonry>

断点 (Resposive Breakpoints)

Different columns and gutter sizes can be specified by passing an object containing key's of the window widths and their values representing the number of columns or gutter size. To have a fallback value, use the default key.

可以通过传递包含窗口宽度的键及其代表列数或装订线大小的值的对象来指定不同的列和装订线大小。 要具有后备值，请使用default键。

note: The cols= attribute needs to use Vues bind method to evaluate objects. Instead of cols="" use either v-bind:cols="{ 700: 3 }" or the shorthand :cols="{ 700: 3 }"

注意： cols=属性需要使用Vues绑定方法来评估对象。 代替cols=""使用v-bind:cols="{ 700: 3 }"或速记:cols="{ 700: 3 }"

<masonry
  :cols="{default: 4, 1000: 3, 700: 2, 400: 1}"
  :gutter="{default: '30px', 700: '15px'}"
  >
  <div v-for="(item, index) in items" :key="index">Item: {{index + 1}}</div>
</masonry>

In the above example, the number of columns will default to 4. When the window's is between 1000px and 700px, the number of columns will be 3. The key represents the max-width of the window, and vue-masonry-css will use the largest key that satisfies this.

在上面的示例中，列数将默认为4。当窗口的大小在1000px至700px之间时，列数将为3。键表示窗口的max-width ，而vue-masonry-css将使用满足此要求的最大钥匙。

翻译自: https://vuejsexamples.com/vue-js-masonry-layout-component-powered-by-css/

vue.js 组件css