feat: add contentAlign prop

packages/infinitegrid/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@egjs/infinitegrid",
-	"version": "4.10.1",
+	"version": "4.11.0-beta.0",
 	"description": "A module used to arrange elements including content infinitely according to grid type. With this module, you can implement various grids composed of different card elements whose sizes vary. It guarantees performance by maintaining the number of DOMs the module is handling under any circumstance",
 	"module": "dist/infinitegrid.esm.js",
 	"main": "dist/infinitegrid.cjs.js",
@@ -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-beta.0",
 		"@egjs/list-differ": "^1.0.0"
 	}
 }

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>