feat: add contentAlign prop (#558)

* feat: add contentAlign prop * chore: update @egjs/grid
naver · Nov 24, 2023 · 559a288 · 559a288
1 parent 93ca3b5
commit 559a288
Show file tree

Hide file tree

Showing 3 changed files with 7,023 additions and 5,995 deletions.
diff --git a/packages/infinitegrid/package.json b/packages/infinitegrid/package.json
@@ -122,7 +122,7 @@
 		"@cfcs/core": "^0.0.5",
 		"@egjs/children-differ": "^1.0.1",
 		"@egjs/component": "^3.0.0",
-		"@egjs/grid": "^1.14.2",
+		"@egjs/grid": "^1.15.0",
 		"@egjs/list-differ": "^1.0.0"
 	}
 }
diff --git a/packages/infinitegrid/test/manual/contentAlign.html b/packages/infinitegrid/test/manual/contentAlign.html
@@ -0,0 +1,170 @@
+<h1 class="header">
+  <a href="https://github.com/naver/egjs-infinitegrid" target="_blank">Virtual Scroll - GridLayout</a>
+</h1>
+<div class="scroller">
+<div class="container gridlayout">
+</div>
+</div>
+
+
+<style>
+  /* html,
+  body {
+    position: relative;
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    background: #fff;
+  } */
+
+  a {
+    color: unset;
+    text-decoration: none;
+  }
+  .scroller {
+    height: 1000px;
+    overflow-y: auto;
+  }
+
+  .header {
+    text-align: center;
+    background: #333;
+    color: #fff;
+    padding: 20px 0px;
+    margin: 0;
+    margin-bottom: 10px;
+  }
+
+  .description {
+    padding: 6px 30px;
+    margin: 0;
+    font-weight: 400;
+  }
+
+  .description li {
+    padding: 3px 0px;
+  }
+
+  .container {
+    width: 100%;
+    height: 600px;
+    background: #f55;
+  }
+
+  .gridlayout .item {
+    display: inline-block;
+    width: 250px;
+    opacity: 1;
+  }
+
+  .gridlayout.horizontal .item {
+    width: auto;
+    height: 250px;
+  }
+
+  .gridlayout .item .thumbnail {
+    max-height: 300px;
+    overflow: hidden;
+    border-radius: 8px;
+  }
+
+  .gridlayout.equal .item .thumbnail {
+    height: 140px;
+  }
+
+  .gridlayout.equal.horizontal .item .thumbnail {
+    height: auto;
+    width: 140px;
+  }
+
+  .gridlayout .item .thumbnail img {
+    width: 100%;
+    border-radius: 8px;
+  }
+
+  .gridlayout.horizontal .item .thumbnail img {
+    width: auto;
+    height: 210px;
+  }
+
+  .gridlayout .item .info {
+    margin-top: 10px;
+    font-weight: bold;
+    color: #777;
+  }
+
+  .gridlayout .item.animate {
+    transition: opacity ease 1s;
+    transition-delay: 0.2s;
+    opacity: 1;
+  }
+
+  .gridlayout .loading {
+    position: absolute;
+    width: 100%;
+    height: 50px;
+    display: none;
+  }
+
+  .gridlayout .loading span {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+  }
+
+  .gridlayout.horizontal .loading {
+    width: 200px;
+    height: 100%;
+  }
+  .placeholder {
+    background: #eee;
+    border-radius: 10px;
+    width: 250px;
+    height: 300px;
+  }
+</style>
+
+<script src="../../dist/infinitegrid.js"></script>
+<script>
+  const itemCount = 10;
+
+  function getItems(nextGroupKey, count) {
+    const nextItems = [];
+
+    for (let i = 0; i < count; ++i) {
+      const num = nextGroupKey * count + i;
+      nextItems.push(`<div class="item">
+    <div class="thumbnail">
+        <img src="https://naver.github.io/egjs-infinitegrid/assets/image/${(num % 33) + 1}.jpg" alt="egjs" />
+    </div>
+    <div class="info">egjs ${num}</div>
+</div>`);
+    }
+    return nextItems;
+  }
+  const ig = new InfiniteGrid.MasonryInfiniteGrid(".container", {
+    scrollContainer: ".scroller",
+    useFit: true,
+    useRecycle: true,
+    horizontal: false,
+    useResizeObserver: true,
+    contentAlign: "start",
+    gap: 5,
+  });
+
+  ig.setPlaceholder({ html: `<div class="placeholder">Placeholder</div>` })
+  ig.on("requestAppend", e => {
+    if (e.isVirtual) {
+      console.log("placeholder");
+      ig.append(getItems(e.nextGroupKey, 10), e.nextGroupKey);
+    } else {
+      const nextGroupKey = (+e.groupKey || 0) + 1;
+
+      ig.append(getItems(nextGroupKey, 10), nextGroupKey);
+    }
+  });
+
+  ig.renderItems();
+</script>