diff --git a/README.md b/README.md index e13c284..5f1f145 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ ---------- You can create a grid using `stratum()` function. It gets object as -parameter with two options: +parameter with three options: #### `padding:` @@ -25,16 +25,21 @@ parameter with two options: - Set an amount of columns in grid. Can be only a *number*. +#### `smart:` + + - Accept *boolean* value `true` or `false`. Makes the grid more flexible and more compact. + > **Notice** Using this option script will set grid items in not right order. + ### Future updates - Older browsers' supports; - - Smart position system *for resize*; - - Delete `setGridHeight` and `resize` functions; + - A few examples in demo folder; - Package in the [npm](https://www.npmjs.com/) catalog; ### Copyright and license + Code and documentation copyright 2018. Code released under the [MIT License](https://en.wikipedia.org/wiki/MIT_License). ##### Work together -If you have any ideas how to improve this plugin just tell me or send pull request. \ No newline at end of file +You can improve this plugin with your ideas. Just tell me or send pull request. \ No newline at end of file diff --git a/demo/index.html b/demo/index.html index 1c64490..75d7219 100644 --- a/demo/index.html +++ b/demo/index.html @@ -17,7 +17,17 @@
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, et eveniet! Ab alias beatae delectus - earum eum, eveniet facilis, in odit quae quo recusandae, + earum eum, eveniet facilis, in odit quae quo recusandae, Lorem ipsum dolor sit amet, consectetur + adipisicing elit. Ea enim, pariatur possimus quos ratione repellendus sed voluptate voluptatibus! + Consectetur corporis doloremque dolores exercitationem id molestias quam quis reiciendis sunt + voluptatem! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad asperiores doloribus fugit illo + minima, nam officiis quaerat tempora? Ad aliquam commodi explicabo illo impedit labore numquam obcaecati + quas sit temporibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aperiam corporis + earum, eius facilis incidunt laborum libero nostrum obcaecati odio perferendis quisquam, reiciendis + sequi tempora tempore totam vel vero voluptatem! at tempora? Ad aliquam commodi explicabo illo impedit + labore numquam obcaecati quas sit temporibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Animi aperiam corporis earum, eius facilis incidunt laborum libero nostrum obcaecati odio perferendis + quisquam, reiciendis sequi tempora tempore totam vel vero voluptatem!
@@ -25,12 +35,7 @@
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, et eveniet! Ab alias beatae delectus earum eum, eveniet facilis, in odit quae quo recusandae, repellat sed similique! Corporis, quae - reiciendis. Lorem ipsum dolor sit amet, cons Lorem ipsum dolor sit amet, consectetur adipisicing elit. - Debitis distinctio et fuga natus nesciunt non placeat quia, recusandae reiciendis reprehenderit, - repudiandae similique vero, voluptatum. Accusamus ad aspernatur natus pariatur quae.ectetur adipisicing - elit. Architecto ex facilis fugit id - molestias quo rem unde voluptatem? Asperiores aspernatur consequatur esse iure necessitatibus quam - soluta voluptate! Nostrum, odit, quo? + reiciendis. Lorem ipsum dolor sit
@@ -38,14 +43,7 @@
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, et eveniet! Ab alias beatae delectus earum eum, eveniet facilis, in odit quae quo recusandae, repellat sed similique! Corporis, quae - reiciendis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto ex facilis fugit id - molestias quo rem unde vo Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, harum, - odio. Animi architecto at ea minus nam neque nihil numquam obcaecati optio voluptatem. Accusantium - consequatur eius esse inventore sed vero? Lorem ipsum dolor sit amet, consectetur adipisicing elit. - Aliquam, amet corporis dicta dignissimos doloremque, eligendi esse eum illum iure minus molestiae nam - quam quis quod recusandae repellendus soluta voluptates! Amet?luptatem? Asperiores aspernatur - consequatur esse iure necessitatibus quam - soluta voluptate! Nostrum, odit, quo? + reiciendis. Lorem ipsum dolor sit
@@ -60,9 +58,7 @@
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, et eveniet! Ab alias beatae delectus - earum eum, eveniet facilis, in odit quae quo recusandae, repellat sed similique! Corporis, quae - reiciendis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto ex facilis fugit id - molestias quo rem unde voluptatem? Asperiores aspernatur conseq + earum eum, eveniet facilis, in odit quae quo recusandae, repellat
@@ -76,10 +72,7 @@
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, et eveniet! Ab alias beatae delectus - earum eum, eveniet facilis, in odit quae quo recusandae, repellat sed similique! Corporis, quae - reiciendis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto ex facilis fugit id - molestias quo rem unde voluptatem? Asperiores aspernatur consequatur esse iure necessitatibus quam - soluta voluptate! Nostrum, odit, quo? + earum eum, eveniet facilis, in
diff --git a/dist/stratum.js b/dist/stratum.js index ae6cd00..89ced7d 100644 --- a/dist/stratum.js +++ b/dist/stratum.js @@ -97,15 +97,14 @@ // Default options. var options = $.extend({ - padding: 15, + padding: 10, columns: 3, smart: false }, args); var $this = $(this); var grid = $this, - heights = [], - arr = []; + sizes = void 0; // Set amount of columns and padding gaps for more readability. var columns = options.columns; @@ -114,12 +113,16 @@ // Default positions. var top = 0, - left = -100 / columns; + left = 0; // Iterate and reformat each matched element. return this.each(function () { function init() { + + // Clear an array before using. + sizes = []; + // Set relative option for grid. grid.css('position', 'relative'); @@ -128,9 +131,15 @@ gridPseudoItems.each(function (i, object) { var gridPseudoItem = $(object), + gridItem = void 0; // Create wrapper only one time when initialize for children element. - gridItem = gridPseudoItem.wrap('
').parent(); + if (gridPseudoItem.data('grid-item') !== undefined) { + gridItem = gridPseudoItem; + console.log('works'); + } else { + gridItem = gridPseudoItem.wrap('
').parent(); + } // Set width and others main CSS rules. gridItem.css({ @@ -141,27 +150,33 @@ var outerHeight = gridItem.outerHeight(true); + // If SS (smart system) is activated. if (smart) { var index = void 0, minTop = 0; - if (arr.length >= columns) { - var minHeight = Math.min.apply(null, arr); // Find min value = min height - index = arr.indexOf(minHeight); // Find number of column + if (sizes.length >= columns) { + var minHeight = Math.min.apply(null, sizes); // Find min value = min height. + index = sizes.indexOf(minHeight); // Find index of column. top = minHeight; - arr[index] += outerHeight; // Add new height to next circle + sizes[index] += outerHeight; // Add new height to next circle. } else { - top = minTop; // Is 0 while array has only {columns} elements + top = minTop; // Is 0 while array has only {columns} elements. index = i; - arr.push(outerHeight); + sizes.push(outerHeight); } + left = 100 / columns * (index % columns); } else { - // Save height value in main array to check top positions. - heights.push(outerHeight); - - // Count left position for each element. i % columns === 0 ? left = 0 : left += 100 / columns; - top = getTopPosition(i); + + // Add old height value in each iteration. + if (sizes.length < columns) { + top = 0; + sizes.push(outerHeight); + } else { + top = sizes[i % columns]; + sizes[i % columns] += outerHeight; + } } gridItem.css({ @@ -170,67 +185,11 @@ }); }); - if (smart) { - grid.css('height', Math.max.apply(null, arr)); - } else { - setGridHeight(heights); - } - } - - // Count grid height value. - function setGridHeight(array) { - var maxSectionHeight = 0, - sectionHeight = void 0; - - // Count max total gridItem height - 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; - - var gridItems = grid.children(); - gridItems.each(function (i, object) { - var gridItem = $(object); - - heights.push(gridItem.outerHeight(true)); - - gridItem.css('top', getTopPosition(i)); // Update and set new position values. - }); - - setGridHeight(heights); - } - - // Get current top position value. - function getTopPosition(index) { - var top = void 0; - if (heights[index - columns] === undefined) { - top = 0; - } else { - var itemNumber = index; - top = 0; - while (itemNumber >= columns) { - top += heights[itemNumber - columns]; - itemNumber -= columns; - } - } - return top; + // Set grid height. + grid.css('height', Math.max.apply(null, sizes)); } - $(window).on('load', init).on('resize', resize); + $(window).on('load resize', init); }); }; })(jQuery); diff --git a/dist/stratum.min.js b/dist/stratum.min.js index 18c297a..4f9b7ac 100644 --- a/dist/stratum.min.js +++ b/dist/stratum.min.js @@ -1 +1 @@ -!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";var r;(r=jQuery).fn.stratum=function(e){var t=r.extend({padding:15,columns:3,smart:!1},e),n=r(this),o=[],i=[],u=t.columns,a=t.padding,c=t.smart,l=0,s=-100/u;return this.each(function(){function e(e){for(var t=0,r=void 0,o=0;o=u;)t+=o[n-u],n-=u}return t}r(window).on("load",function(){n.css("position","relative"),n.children().each(function(e,n){var f=r(n).wrap('
').parent();f.css({position:"absolute",width:100/u+"%",padding:a});var d=f.outerHeight(!0);if(c){var p=void 0;if(i.length>=u){var v=Math.min.apply(null,i);p=i.indexOf(v),l=v,i[p]+=d}else l=0,p=e,i.push(d);s=100/u*(p%u)}else o.push(d),e%u==0?s=0:s+=100/u,l=t(e);f.css({left:s+"%",top:l})}),c?n.css("height",Math.max.apply(null,i)):e(o)}).on("resize",function(){o=[],l=0,n.children().each(function(e,n){var i=r(n);o.push(i.outerHeight(!0)),i.css("top",t(e))}),e(o)})})}}]); \ No newline at end of file +!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";var r;(r=jQuery).fn.stratum=function(e){var t=r.extend({padding:10,columns:3,smart:!1},e),n=r(this),o=void 0,i=t.columns,u=t.padding,a=t.smart,l=0,d=0;return this.each(function(){r(window).on("load resize",function(){o=[],n.css("position","relative"),n.children().each(function(e,t){var n=r(t),s=void 0;void 0!==n.data("grid-item")?(s=n,console.log("works")):s=n.wrap("
").parent(),s.css({position:"absolute",width:100/i+"%",padding:u});var c=s.outerHeight(!0);if(a){var f=void 0;if(o.length>=i){var p=Math.min.apply(null,o);f=o.indexOf(p),l=p,o[f]+=c}else l=0,f=e,o.push(c);d=100/i*(f%i)}else e%i==0?d=0:d+=100/i,o.length').parent(); + let gridPseudoItem = $(object), gridItem; + + // Create wrapper only one time when initialize for children element. + if (gridPseudoItem.data('grid-item') !== undefined) { + gridItem = gridPseudoItem; + console.log('works'); + } else { + gridItem = gridPseudoItem.wrap('
').parent(); + } // Set width and others main CSS rules. gridItem.css({ @@ -45,26 +55,32 @@ let outerHeight = gridItem.outerHeight(true); + // If SS (smart system) is activated. if (smart) { let index, minTop = 0; - if (arr.length >= columns) { - let minHeight = Math.min.apply(null, arr); // Find min value = min height - index = arr.indexOf(minHeight); // Find number of column + if (sizes.length >= columns) { + let minHeight = Math.min.apply(null, sizes); // Find min value = min height. + index = sizes.indexOf(minHeight); // Find index of column. top = minHeight; - arr[index] += outerHeight; // Add new height to next circle + sizes[index] += outerHeight; // Add new height to next circle. } else { - top = minTop; // Is 0 while array has only {columns} elements + top = minTop; // Is 0 while array has only {columns} elements. index = i; - arr.push(outerHeight); + sizes.push(outerHeight); } + left = 100 / columns * (index % columns); } else { - // Save height value in main array to check top positions. - heights.push(outerHeight); - - // Count left position for each element. i % columns === 0 ? left = 0 : left += 100 / columns; - top = getTopPosition(i); + + // Add old height value in each iteration. + if (sizes.length < columns) { + top = 0; + sizes.push(outerHeight); + } else { + top = sizes[i % columns]; + sizes[i % columns] += outerHeight; + } } gridItem.css({ @@ -73,69 +89,11 @@ }); }); - if (smart) { - grid.css('height', Math.max.apply(null, arr)); - } else { - setGridHeight(heights); - } - } - - // Count grid height value. - function setGridHeight(array) { - let maxSectionHeight = 0, - sectionHeight; - - // Count max total gridItem height - for (let col = 0; col < columns; col++) { - sectionHeight = 0; - for (let 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; - - let gridItems = grid.children(); - gridItems.each(function (i, object) { - let gridItem = $(object); - - heights.push(gridItem.outerHeight(true)); - - gridItem.css('top', getTopPosition(i)); // Update and set new position values. - }); - - setGridHeight(heights); - } - - // Get current top position value. - function getTopPosition(index) { - let top; - if (heights[index - columns] === undefined) { - top = 0; - } else { - let itemNumber = index; - top = 0; - while (itemNumber >= columns) { - top += heights[itemNumber - columns]; - itemNumber -= columns; - } - } - return top; + // Set grid height. + grid.css('height', Math.max.apply(null, sizes)); } - $(window) - .on('load', init) - .on('resize', resize); + $(window).on('load resize', init); }); };