npm 包 viskan-deku-packery 使用教程

npm 包 viskan-deku-packery 使用教程

在前端开发中，Packery 是一种流体网格布局语言，可以让你以一种漂亮的方式对元素进行排列。而 viskan-deku-packery 就是一个使用了 Packery 的 npm 包。在本篇文章中，我们将会介绍 viskan-deku-packery 的使用方式，包括如何安装、如何使用、以及如何优化。

安装

在使用之前，我们需要通过 npm 来安装这个包。在控制台输入以下命令：

--- ------- ------------------- ------

使用

HTML

首先，我们需要在 HTML 中添加以下代码，以引入必要的 CSS 和 JS 文件：

--------- -----
------
  ------
    ---- -- --------------- ---
    ----- ---------------- --------------------------------------------------------------------------- --
  -------
  ------
    ---- -------------
      ---- -------------------------
      ---- -------------------------
      ---- -------------------------
      ---- -------------------------
      ---- -------------------------
      ---- -------------------------
    ------

    ---- -- -------------- ---
    ------- -----------------------------------------------------------------------------------
    ---- -- ---------------------- ---
    ------- ----------------------------------------------------------------------------
  -------
-------

Init Packery & Init Viskan-Deku-Packery

接下来，在 JS 中，我们需要初始化 Packery 和 Viskan-Deku-Packery：

-- --- -------
--- ---- - --------------------------------
--- ----- - --- ------------- -
  -- ----------
---

-- --- -------------------
--- ------- - --- ------------------------ -
  -- ----------
---

在上面的代码中，我们首先通过 .querySelector() 选择了我们的 grid 元素，并通过 new Packery(grid, options) 来初始化了 Packery，并将其结果赋值给 pckry。然后，我们使用 new ViskanDekuPackery(pckry, options)，将 pckry 作为第一个参数传入来初始化 Viskan-Deku-Packery 并将其结果赋值给 vdpckry。

Options

在上面的代码中，我们传入了一些选项。这里是一些可用的选项：

--- ------- - -
  -- ----------------- ----------
  ---------- ----
  ----------- ----
  ------- ---
  -------------- ----
  ---------- --
  ------------- ---
  ------------------ ----
  ---------------- --------------
  -------------- ------------
  ------------------- ---------------------------------
  ----------------- -
    ----- --
    ----- --
  --
  -------- -
    --- ------
    ------ --
  --
  ------- -
    --- ------
    --------- -----
  --
  ------ -
    ----------- -------
    --------- ------
  --
  -- ------- ----------
  ------------- -------------
  ------------ --------------
  ---------------- -----
--

Methods

一旦初始化完成，我们可以使用下面的方法来控制我们的布局。

-- ---- ----
------------------
-- ----------
---------------------
-- ----
-----------------
-- -- ------------------- --
------------------

以上是一些常用的方法，完整的 API 可以在 viskan-deku-packery 的官方文档 中找到。

优化

Resize

在浏览器大小发生变化时，我们可能需要重新调整布局以适应新的大小。viskan-deku-packery 提供了一个 resize 方法，可以帮助我们实现这个目标：

--------------------------------- ---------- -
  -- ---- --- ------ -- ---
  ---------------------------------
  ------------------ - --------------------- -
    -----------------
  -- -----
---

在上面的代码中，我们添加了一个 resize 事件监听器，并在这个监听器中使用了 setTimeout() 来等待浏览器调整完成。然后，我们使用 vdpckry.resize() 来调整布局。

Infinite Scroll

如果我们想要实现无限滚动加载，我们可以使用 Infinite Scroll 来自动加载更多元素时调用“add”方法：

-- -------
--- --------- - --- ----------------------- -
  -- -------- ------ ----------
  ----- ------------- -- ---------- ---
  ------- ------------- -- ----------
  -------- ------
---

-- -- --------- --------------
-------------------- ------------------ ----- -
  -- -------- ----------
  --- ----- - -------------------
  -------------------
  -- ------------
  -----------------
---

在上面的代码中，我们首先初始化了 Infinite Scroll，并在 on('load') 事件监听器中调用了 vdpckry.add() 来添加新元素，然后手动进行了重新布局以适应这些新元素。

示例代码

最后，以下是一个完整的示例代码，可以让您更好地了解 viskan-deku-packery 的使用方式：

--------- -----
------
  ------
    ----- --------------- --
    ----- --------------- ---------------------------- ------------------ --
    -------------------------- ------------
    ---- -- --------------- ---
    ----- ---------------- --------------------------------------------------------------------------- --
    -------
      -- ----- --
      ----- -
        ---------- ------
        ------- - -----
      -

      ---------- -
        ----------------- --------
        ------- --- ----- --------
        -------------- ----
        ------ --------
        ---------- ----
        ------------ -----
        -------- -----
        ----------- -------
      -
    --------
  -------
  ------
    ---- -------------
      ---- ---------------------------------------- ---
      ---- --------------- ---
      ---- -------------------------
      ---- -------------------------
      ---- -------------------------
      ---- -------------------------
      ---- -------------------------
      ---- -------------------------
      ---- -------------------------
    ------
    ---- -- -------------- ---
    ------- -----------------------------------------------------------------------------------
    ---- -- ---------------------- ---
    ------- ----------------------------------------------------------------------------
    ------- --------------------------------------------------------------------------------------------------------
    --------
      -- --- -------
      --- ---- - --------------------------------
      --- ----- - --- ------------- -
        ------------- -------------
        ------------ --------------
        ---------------- -----
      ---

      -- --- -------------------
      --- ------- - --- ------------------------ -
        ---------- ----
        ----------- ----
        ------- --
        -------------- ----
        ---------- --
        ------------- ---
        ------------------ ----
        ---------------- --------------
        -------------- ------------
        ------------------- ---------------------------------
        ----------------- -
          ----- --
          ----- --
        --
        -------- -
          --- ------
          ------ --
        --
        ------- -
          --- ------
          --------- -----
        --
        ------ -
          ----------- -------
          --------- ------
        --
      ---

      -- -------
      --- --------- - --- ----------------------- -
        ----- -------------
        ------- -------------
        -------- ------
      ---

      -- -- --------- --------------
      -------------------- ------------------ ----- -
        --- ----- - -------------------
        -------------------
        -- ------------
        -----------------
      ---

      -- -------- ------ --
      --------------------------------- ---------- -
        ---------------------------------
        ------------------ - --------------------- -
          -----------------
        -- -----
      ---

      -- ------ ---- -------
      -------- ------------------ -
        --- ----- - ---
        --- ---- - - -- - - ---------------- ---- -
          --- ---- - ------------------------------
          --------------------------------
          ---------------- - ------------------
          -----------------
        -
        ------ ------
      -
    ---------
  -------
-------

上面这段代码提供了一个带有无限滚动加载的示例，您可以根据需要进行修改和扩展。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005592a81e8991b448d69ce

阅读全文

猜你喜欢

  • npm 包 svg-node-ts 使用教程

    SVG 是一种为 Web 设计/应用而生的矢量文件格式，它不像像素图那样不受放大而变得模糊，同时还可以通过标签控制 SVG 制图中的各个元素，这使得它很适合应用在各种动画和图形中。

    2 年前
  • npm 包 angular2-widgets-manager 使用教程

    前言 随着前端框架的不断更新和发展，现在的前端技术已经不只是单纯的 HTML、CSS 和 JavaScript 了。Angular2 是一个目前比较流行的前端框架，它提供了很多工具和组件来简化开发，其...

    2 年前
  • npm 包 gulp-qne 使用教程

    前言 开发前端项目的时候，我们经常需要进行文件的打包压缩，图片的优化处理，代码的检测压缩等等一系列操作。gulp 是一款非常优秀的自动化构建工具，可以极大提高前端开发效率。

    2 年前
  • npm 包 formuoli 使用教程

    前言 在前端开发过程中，我们经常需要使用到表单验证功能。而 formuoli 则是一款基于 React 的 npm 包，可以帮助我们轻松实现各种表单验证。本文将介绍如何在前端项目中使用 formuol...

    2 年前
  • npm 包 js-core-animation 使用教程

    js-core-animation 是一个强大的 JavaScript 库，它可以帮助你创建流畅的动画效果。这个库使用了现代的 Web 技术标准，包括 CSS 动画和原生的 HTML5 Canvas ...

    2 年前
  • npm 包 v-logger 使用教程

    一、什么是 v-logger？ v-logger 是一个为 Vue.js 开发者提供的日志输出和处理工具，在开发过程中帮助开发者快速定位问题、调试代码。它可以输出各种不同级别的日志信息（如 debug...

    2 年前
  • npm 包 ylfin-mockjs 使用教程

    本文将介绍如何使用 npm 包 ylfin-mockjs 来进行前端开发中数据模拟，让前端开发更高效！ 什么是 ylfin-mockjs？ ylfin-mockjs 是一个 mock 数据生成工具，可...

    2 年前
  • npm 包 hubot-dice-roller 使用教程

    前言 在编写自动化机器人的时候，经常需要随机生成一个数字或者字符串，用来作为自动回复的一部分或者触发某些事件。这个时候，通常会使用一些随机数生成的工具。而 hubot-dice-roller 是一个专...

    2 年前
  • npm 包 heatjs 使用教程

    介绍 Heat.js 是一款前端热图插件，它可以用来对网页上的热度进行可视化，让你了解每个页面的热度分布。本文将介绍如何使用 npm 包 heatjs。 安装 Heat.js 可以通过 npm 进行安...

    2 年前
  • npm 包 gulp-riot-tsref 使用教程

    简介 在前端开发中，使用 gulp 和 Riot.js 已经成为了常见的方式。而使用 TypeScript 使得我们可以更好地管理开发过程中的类型和模块化。此时，gulp-riot-tsref 这个 ...

    2 年前
  • npm包oada-lib-arangodb使用教程

    简介 oada-lib-arangodb是一个使用ArangoDB作为数据库的Node.js库。它可以帮助开发人员在应用程序中轻松使用数据库。 ArangoDB是一个开源NoSQL数据库，它可以存储文...

    2 年前
  • npm 包 promise-fail 使用教程

    当我们在编写前端代码时，经常会使用 Promise 对象来处理回调函数。但是，有时候我们需要手动触发 Promise 的 reject，这时候就可以使用 promise-fail 这个 npm 包。

    2 年前
  • npm 包 simpla-paths 使用教程

    简介 simpla-paths 是一个基于 Node.js 的 npm 包，可以帮助前端开发者简化文件路径的书写方式，降低错误概率，提高开发效率。本文将介绍如何使用 simpla-paths。

    2 年前
  • npm 包 yaft 使用教程

    介绍 yaft 是一个基于 JavaScript 的前端框架，它的名称是 Yet Another Frontend Template 的缩写，意为“又一个前端模板”。

    2 年前
  • npm 包 ember-browser-manager 使用教程

    前端应用离不开浏览器，不同的浏览器有着不同的兼容性问题和特性。为了解决这些问题，开发者们需要大量的浏览器测试和管理工作。而 Ember Browser Manager 就是一个方便管理和测试不同浏览器...

    2 年前
  • npm 包 hubot-doubles 使用教程

    在前端开发中，自动化流程已经成为了一个必不可少的部分。而 Hubot 是一个非常流行的自动化工具，它可以被用来做各种自动化任务，例如自动运行测试，自动完成部署等等。

    2 年前
  • npm 包 node-persistent-redux 使用教程

    在前端开发中，使用 Redux 来管理状态可以使得应用程序结构更加清晰和可维护。node-persistent-redux 是一个基于 Redux 的 npm 包，这个包可以将 store 中的数据保...

    2 年前
  • npm 包 hubot-elo-leaderboards 使用教程

    随着电子竞技的飞速发展，评级系统成为了评价游戏玩家技能的标准。在前端开发领域，有一个 npm 包 hubot-elo-leaderboards 可以帮助我们实现聊天室内电子竞技评级系统。

    2 年前
  • npm 包 perfect-styles 使用教程

    当你在开发 Web 应用程序时，样式是令人头疼的一部分。 perfect-styles 是一个优秀的 npm 包，它可以帮助你让你的网站看起来更加美丽和专业。在本文中，我们将详细介绍如何使用 perf...

    2 年前
  • npm 包 react-portal-minimal 使用教程

    react-portal-minimal 是一个用于在 React 应用中创建 Portal 的 npm 包。Portal 是将组件渲染到 DOM 组件树之外的一种技术，它可以解决一些常见的布局问题，...

    2 年前

相关推荐

    暂无文章