Added setGridHeight function.

zaxovaiko · Jun 30, 2018 · 07860dc · 07860dc
1 parent dfd83c4
commit 07860dc
Show file tree

Hide file tree

Showing 6 changed files with 924 additions and 844 deletions.
diff --git a/README.md b/README.md
@@ -8,7 +8,21 @@
 ### How to use?
 
  - You can download it with [stratum.js CDN](https://cdn.rawgit.com/zaxoavoki/stratum.js/31373231/dist/stratum.min.js);
- - Use npm catalog;
+ - Use npm catalog *(in future)*;
+
+----------
+
+You can create a grid using `stratum()` function. It gets object as
+parameter with two options:
+
+#### `padding:`
+
+ - Set padding gaps between grid items. You can put *number* or *string* in such format: `padding: '15px 10px 20px 30px'`, which means 
+ that you want to set padding-top with **15px**, padding-bottom with **20px** and etc.
+
+#### `columns:`
+
+ - Set an amount of columns in grid. Can be only a *number*.
 
 ### Future updates
 

diff --git a/demo/index.html b/demo/index.html
@@ -13,7 +13,7 @@
 <body>
 
 <div class="container">
-    <div data-grid="3">
+    <div id="grid">
         <div class="card">
             <div class="card-body">
                 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, et eveniet! Ab alias beatae delectus
@@ -101,15 +101,19 @@
             </div>
         </div>
     </div>
+
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, asperiores delectus dolore dolorum illo illum
+    labore laboriosam nemo neque nulla provident quia quibusdam, quos reiciendis, reprehenderit sequi sit sunt
+    voluptates!
 </div>
 
 <!-- Include jQuery first and stratum.js -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script src="../dist/stratum.min.js"></script>
 <script>
-    $('[data-grid]').stratum({
+    $('#grid').stratum({
         padding: 5,
-        columns: 2
+        columns: 3
     });
 </script>
 

diff --git a/dist/stratum.js b/dist/stratum.js
@@ -121,7 +121,8 @@
                 });
 
                 //
-                // Main cycle: there we will check current coordinates
+                // Main cycle will check current coordinates
+                //
                 grid.children().each(function (i, obj) {
 
                     var gridItem = $(obj);
@@ -148,8 +149,35 @@
                         top: getTopPosition(gridItem, i)
                     });
                 });
+
+                setGridHeight(heights);
             }
 
+            //
+            // Count grid height value
+            //
+            function setGridHeight(array) {
+                var maxSectionHeight = 0,
+                    sectionHeight = void 0;
+                for (var col = 0; col < columns; col++) {
+                    sectionHeight = 0;
+                    for (var i = col; i < array.length; i += columns) {
+                        sectionHeight += array[i];
+                    }
+
+                    if (maxSectionHeight < sectionHeight) {
+                        maxSectionHeight = sectionHeight;
+                    }
+                }
+
+                grid.css({
+                    'height': maxSectionHeight
+                });
+            }
+
+            //
+            // Rewrite top position value while resizing
+            //
             function resize() {
                 heights = [];
                 top = 0;
@@ -164,10 +192,13 @@
                         top: getTopPosition(gridItem, i)
                     });
                 });
+
+                setGridHeight(heights);
             }
 
             //
             // Get current top position value
+            //
             function getTopPosition(obj, index) {
                 if (heights[index - columns] === undefined) {
                     top = 0;

diff --git a/dist/stratum.min.js b/dist/stratum.min.js