Skip to content

Commit

Permalink
Added smart system.
Browse files Browse the repository at this point in the history
  • Loading branch information
@zaxovaiko
zaxovaiko committed Jul 3, 2018
1 parent 07860dc commit 0f4499e
Show file tree
Hide file tree
Showing 7 changed files with 5,349 additions and 210 deletions.
14 changes: 10 additions & 4 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

### Table of contents

- [How to use?](https://github.com/zaxoavoki/stratum.js#how-to-use?)
- [Future updates](https://github.com/zaxoavoki/stratum.js#future-updates)
- [Copyright and license](https://github.com/zaxoavoki/stratum.js#copyright-and-license)

Expand All @@ -26,9 +27,14 @@ parameter with two options:

### Future updates

- Add older browsers' supports;
- Rewrite code using basic jQuery plugin rules;
- Add this package to the [npm](https://www.npmjs.com/) catalog;
- Older browsers' supports;
- Smart position system *for resize*;
- Delete `setGridHeight` and `resize` functions;
- 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).
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.
29 changes: 6 additions & 23 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,7 @@
<div class="card">
<div class="card-body">
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 odit quae quo recusandae,
</div>
</div>

Expand Down Expand Up @@ -56,16 +53,7 @@
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, et eveniet! Ab alias beatae delectus
earum eum, eveniet facilis, in od Lorem ipsum dolor sit amet, consectetur adipisicing elit. At
consequuntur culpa cumque cupiditate, debitis deleniti eligendi excepturi exercitationem iste itaque,
iure officia officiis, repellat repudiandae sequi sint sunt! Ipsa, magnam. Lorem ipsum dolor sit amet,
consectetur adipisicing elit. A, animi dolor dolorum eius facilis ipsum libero magnam mollitia sequi
veritatis? Aliquam aliquid in incidunt laborum quidem quis sequi voluptas voluptates?Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Aperiam blanditiis commodi cum eveniet excepturi illum impedit
inventore maiores minima minus molestiae quia quidem quo quos ratione repudiandae, similique soluta
velit.it 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?
consequuntur culpa cumque cupidita
</div>
</div>

Expand All @@ -74,20 +62,14 @@
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? Lorem ipsum dolor sit amet, consectetur adipisicing elit. A
accusantium beatae cum cumque doloremque eaque error ipsam numquam odio pariatur placeat possimus
repellendus, reprehenderit sed suscipit ut veniam vitae voluptatem!
molestias quo rem unde voluptatem? Asperiores aspernatur conseq
</div>
</div>

<div class="card">
<div class="card-body">
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
</div>
</div>

Expand All @@ -113,7 +95,8 @@
<script>
$('#grid').stratum({
padding: 5,
columns: 3
columns: 3,
smart: true
});
</script>

Expand Down
133 changes: 73 additions & 60 deletions dist/stratum.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,72 +93,96 @@

(function ($) {

$.fn.stratum = function (options) {
$.fn.stratum = function (args) {

var settings = $.extend({
// Default options.
var options = $.extend({
padding: 15,
columns: 3
}, options);
columns: 3,
smart: false
}, args);

var grid = $(this);
var heights = [];
var $this = $(this);
var grid = $this,
heights = [],
arr = [];

// Count of the columns and default padding gap
var columns = settings.columns;
var padding = settings.padding;
// Set amount of columns and padding gaps for more readability.
var columns = options.columns;
var padding = options.padding;
var smart = options.smart;

// Default positions
var top = 0;
var left = -100 / columns;
// Default positions.
var top = 0,
left = -100 / columns;

// Iterate and reformat each matched element
// Iterate and reformat each matched element.
return this.each(function () {

// Initialize stratum function
function init() {
grid.css({
position: 'relative'
});

//
// Main cycle will check current coordinates
//
grid.children().each(function (i, obj) {
// Set relative option for grid.
grid.css('position', 'relative');

var gridItem = $(obj);
// Iterate each grid child item and set new changes.
var gridPseudoItems = grid.children();
gridPseudoItems.each(function (i, object) {

if (gridItem.attr('class') !== "grid_item") {
gridItem.wrap('<div class="grid_item"></div>');
}
var gridPseudoItem = $(object),

i % columns === 0 ? left = 0 : left += 100 / columns;
// Create wrapper only one time when initialize for children element.
gridItem = gridPseudoItem.wrap('<div class="grid-item"></div>').parent();

// Set width and others CSS rules
gridItem.parent().css({
// Set width and others main CSS rules.
gridItem.css({
position: 'absolute',
width: 100 / columns + '%',
left: left + '%',
padding: padding
});

// Save height value in main array to check top positions
heights.push(gridItem.parent().outerHeight(true));
var outerHeight = gridItem.outerHeight(true);

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
top = minHeight;
arr[index] += outerHeight; // Add new height to next circle
} else {
top = minTop; // Is 0 while array has only {columns} elements
index = i;
arr.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);
}

// Update and set new position values
gridItem.parent().css({
top: getTopPosition(gridItem, i)
gridItem.css({
left: left + '%',
top: top
});
});

setGridHeight(heights);
if (smart) {
grid.css('height', Math.max.apply(null, arr));
} else {
setGridHeight(heights);
}
}

//
// Count grid height value
//
// 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) {
Expand All @@ -170,36 +194,29 @@
}
}

grid.css({
'height': maxSectionHeight
});
grid.css('height', maxSectionHeight);
}

//
// Rewrite top position value while resizing
//
// Rewrite top position value while resizing.
function resize() {
heights = [];
top = 0;

grid.children().each(function (i, obj) {
var gridItem = $(obj);
var gridItems = grid.children();
gridItems.each(function (i, object) {
var gridItem = $(object);

heights.push(gridItem.outerHeight(true));

// Update and set new position values
gridItem.css({
top: getTopPosition(gridItem, i)
});
gridItem.css('top', getTopPosition(i)); // Update and set new position values.
});

setGridHeight(heights);
}

//
// Get current top position value
//
function getTopPosition(obj, index) {
// Get current top position value.
function getTopPosition(index) {
var top = void 0;
if (heights[index - columns] === undefined) {
top = 0;
} else {
Expand All @@ -213,11 +230,7 @@
return top;
}

$(window).on('load', function () {
init();
}).on('resize', function () {
resize();
});
$(window).on('load', init).on('resize', resize);
});
};
})(jQuery);
Expand Down
2 changes: 1 addition & 1 deletion dist/stratum.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 0f4499e

Please sign in to comment.