在前端开发中，瀑布流布局是一种常见的页面布局方式，能够让页面显得更加美观和富有艺术感。而使用 Custom Elements 技术实现的瀑布流布局，更是让页面的可拓展性和可维护性得到了提高。然而，在 Chrome 浏览器中使用 Custom Elements 实现的瀑布流布局却存在一些渲染上的问题。
问题描述
在使用 Custom Elements 实现的瀑布流布局中，每一个瀑布流块（block）都需要编写一个自定义元素来描述，其中包含了该块的内容和样式等信息。然后，在瀑布流容器（container）中，将所有的瀑布流块依次插入，从而实现瀑布流布局。
然而，在 Chrome 浏览器中，如果瀑布流块的高度过大，就会导致容器内的其他瀑布流块无法正常显示，而是出现了一些渲染上的问题，例如布局混乱、错位等。
这种问题的出现，主要是由于 Chrome 浏览器使用了一种称之为“流式布局（Flow Layout）”的渲染方式。简单地说，就是在进行渲染时，浏览器先按原有的 HTML 代码流程对元素进行计算和定位，然后再对页面进行渲染。而对于使用 Custom Elements 实现的瀑布流布局，由于瀑布流块的高度不一，因此会导致浏览器重启计算和定位，进而导致渲染出错。
解决方案
针对以上问题，有一个比较好的解决方案，即使用 Web Animations API 技术来规避问题。这种解决方案的基本思路是：在进行瀑布流块的布局时，先使用 Web Animations API 技术计算出每个块的最终位置与大小，然后再进行渲染，这样就可以避免因块高而导致的布局问题。
下面是一个具体实现示例：
-- -------------------- ---- -------
----------- ----------------------
----------
-------
---------
-------- -----
---------------- -------
---------- -----
------------ -----------
-
------
--------- ---------
---- --
----- --
------ -----
----------- -----------
----------------- -----
-------- -----
---------- -----
------------ -----
------ -----
-
--------
---- ----------------------
-----------
--------
----- --------------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
------------------------- - --------------
------------ - ------------------------------------------
---------- - ---
--------------------------------- -------------------------------
-
--- ---------- -
------ -
-------
----- -
-------- ------
-
--------
---- ----------------------
--
-
---------------- -
-------------------------------
-----------------------
-
---------------- -
----- ---- - ------------------------------
-------------- - -------
-------------- - --------
-------------------------------
-----------------
-------- -----
------- ------------------
------ -----------------
--------- -
---- --
----- -
-
---
-
----------------- -
----------------------- -- -
----- --- - ---------------------------- -- -------------- - ---------- -- --
----- ---- - -------------------
----------------- - ----
------------------ - -----
---
---------------------
-
------------- -
----- ------- - ------------------
----- ----------- - ------------------------ - --------
----- ------------- - -----------------------
-------------------- -- -
----- ----- - -------------------------- - -------------
-------------------- -- ---------
---
----- ----- - --------------------------------------------------
------ ----- - ----------- - ----
-
--------------- -
----------------------- -- -
----- ------------- - -
---- ---------------------- - -----
----- ----------------------- - -----
------ ------------------------ - -----
------- ------------------------- - ----
--
----- ----------- - -
---- ----------------- - -----
----- -------------------
------ ---------- - -----
------- ----------- - ----
--
----- ------ - ----------------------
-
---- ------------------
----- -------------------
------ --------------------
------- --------------------
--
-
---- ----------------
----- -----------------
------ ------------------
------- ------------------
-
-- -
--------- ----
------- --------------
----- ------
---
--------------- - -- -- -
------------------------ - ---------- - -----
------------------------- - ----------- - -----
---------------------- - ----------------- - -----
----------------------- - ------------------ - -----
--
---
-
------------ -
------ ----------------------------------- - -----
-
-
----------------------------------------- -----------------
---------
-------------在上述代码中，我们通过获取每个瀑布流块的位置和大小信息，再通过 Web Animations API 技术来实现瀑布流块的动画效果，从而避免了 Chrome 中渲染出错的问题。
总结
通过本文的介绍，我们了解了使用 Custom Elements 实现的瀑布流布局在 Chrome 中可能存在的渲染问题，并且掌握了使用 Web Animations API 技术来解决这个问题的方法，这对于提高我们的前端开发能力和解决实际问题都有很大的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652f8feb7d4982a6eb0b8c5f