feat(content): dynamic image list for bg

1 files changed, 42 insertions, 0 deletions

diff --git a/src/component/ImageBackground.astro b/src/component/ImageBackground.astro
index e69de29..9277472 100644
--- a/src/component/ImageBackground.astro
+++ b/src/component/ImageBackground.astro
@@ -0,0 +1,42 @@
+---
+
+---
+
+<div class="bg">
+  <slot/>
+</div>
+
+<script lang="js">
+  document.querySelectorAll(".bg").forEach((e) => {
+    const children = e.children;
+    const max = e.clientWidth;
+    const height = e.hasAttribute("data-height") ? e.getAttribute("data-height") : 400;
+    const newChildren = [];
+
+    let line = document.createElement("div");
+    let currentWidth = 0;
+    let i = 0;
+
+    const fn = () => {
+      let current = children[i++];
+      let ratio = current.clientWidth / current.clientHeight;
+      line.appendChild(current.cloneNode(true));
+      currentWidth += ratio * height;
+    }
+
+    while (i < children.length) {
+      // adding elements
+      while (i < children.length && currentWidth <= max) fn()
+      if (i < children.length) fn()
+      // setting height
+      let h = (max * height) / currentWidth;
+      line.style.height = `${h}px`;
+      newChildren.push(line);
+      if (i < children.length) {
+        line = document.createElement("div");
+        currentWidth = 0
+      }
+    }
+    e.replaceChildren(...newChildren);
+  });
+</script>