什么是 vue-photo-grid？
vue-photo-grid 是一款基于 Vue.js 的响应式图片网格布局工具。它可以用来展示照片墙、图片集、产品展示等等。该工具可以自动计算网格数量和图片布局，并且支持 webpack、npm 等现代工具。
安装 vue-photo-grid
使用 vue-photo-grid 首先需要在项目中安装它。
npm 安装
在项目的根目录下使用 npm 安装 vue-photo-grid：
npm install vue-photo-grid --save
或者使用 yarn 安装
也可以使用 yarn 安装：
yarn add vue-photo-grid
使用 vue-photo-grid
在项目中使用 vue-photo-grid，需要首先导入它：
import VuePhotoGrid from 'vue-photo-grid'
然后，把 VuePhotoGrid 组件注册为局部组件：
export default {
components: {
VuePhotoGrid
}
}接着，在模板中使用 VuePhotoGrid 组件，并传递图片数据和配置参数：
<vue-photo-grid :data="data" :options="options" />
vue-photo-grid 配置
vue-photo-grid 支持多种配置，可以满足不同需求的图片网格布局。以下是一些常用的配置参数：
data
data 是一个数组，它存储了使用 vue-photo-grid 的图片数据。
-- -------------------- ---- -------
-
-
---- --------------------------------------
------ ----
------- ----
---- ------ --
--
-
---- --------------------------------------
------ ----
------- ----
---- ------ --
--
-- ---
-options
options 是一个对象，它用来配置 vue-photo-grid 的各种选项。
以下是一些常用的选项：
gutter
gutter 是图片之间的间距，它可以是一个数字或者一个对象。
gutter: 10
或者
gutter: {
vertical: 10,
horizontal: 20
}columns
columns 是网格布局的列数，它可以是一个数字或者一个数组。
columns: 3
或者
columns: [2, 3, 4, 5]
layoutHeight
layoutHeight 是网格布局的高度，它可以是一个数字或者一个函数。
layoutHeight: 800
或者
layoutHeight: () => window.innerHeight - 100
cover
cover 是一个布尔值，它表示图片是否要拉伸以填满整个格子。
cover: true
lazyload
lazyload 是一个布尔值，它表示是否启用图片懒加载。
lazyload: true
useSwitchHeight
useSwitchHeight 是一个布尔值，它表示是否启用高度切换。
useSwitchHeight: false
switchHeightNextTick
switchHeightNextTick 是一个布尔值，它表示是否在下一个 tick 中启用高度切换。
switchHeightNextTick: true
useJustifiedLayout
useJustifiedLayout 是一个布尔值，它表示是否启用公正分配的网格布局。
useJustifiedLayout: false
useSizeOptimization
useSizeOptimization 是一个布尔值，它表示是否启用图片大小优化。
useSizeOptimization: false
示例代码
以下是一个使用 vue-photo-grid 展示图片的示例代码：
-- -------------------- ---- -------
----------
-----
--------------- ------------ ------------------ --
------
-----------
--------
------ ------------ ---- ----------------
------ ------- -
----------- -
------------
--
---- -- -
------ -
----- -
-
---- --------------------------------------
------ ----
------- ----
---- ------ --
--
-
---- --------------------------------------
------ ----
------- ----
---- ------ --
--
-
---- --------------------------------------
------ ----
------- ----
---- ------ --
--
-
---- --------------------------------------
------ ----
------- ----
---- ------ --
--
-
---- --------------------------------------
------ ----
------- ----
---- ------ --
-
--
-------- -
------- ---
-------- --- -- -- ---
------------- -- -- ------------------ - ----
------ -----
--------- -----
---------------- ------
--------------------- -----
------------------- ------
-------------------- ----
-
-
-
-
---------总结
vue-photo-grid 是一个功能强大的图片网格布局工具，它可以自动计算网格数量和图片布局，并且支持多种配置参数。使用 vue-photo-grid 可以快速地搭建图片展示页面，提高开发效率。如果你正在寻找一款优秀的图片网格布局工具，那么 vue-photo-grid 绝对值得一试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cf581e8991b448e6b35