Skip to content

Commit

Permalink
Rewrite init function. Added resize methods. Stable version: 1.0.0.
Browse files Browse the repository at this point in the history
  • Loading branch information
@zaxovaiko
zaxovaiko committed Jul 4, 2018
1 parent 0f4499e commit 5b0a2d0
Show file tree
Hide file tree
Showing 5 changed files with 95 additions and 180 deletions.
13 changes: 9 additions & 4 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:`

Expand All @@ -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.
You can improve this plugin with your ideas. Just tell me or send pull request.
37 changes: 15 additions & 22 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,35 +17,33 @@
<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,
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!
</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, 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
</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 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
</div>
</div>

Expand All @@ -60,9 +58,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 conseq
earum eum, eveniet facilis, in odit quae quo recusandae, repellat
</div>
</div>

Expand All @@ -76,10 +72,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
</div>
</div>
</div>
Expand Down
109 changes: 34 additions & 75 deletions dist/stratum.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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');

Expand All @@ -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('<div class="grid-item"></div>').parent();
if (gridPseudoItem.data('grid-item') !== undefined) {
gridItem = gridPseudoItem;
console.log('works');
} else {
gridItem = gridPseudoItem.wrap('<div data-grid-item></div>').parent();
}

// Set width and others main CSS rules.
gridItem.css({
Expand All @@ -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({
Expand All @@ -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);
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 5b0a2d0

Please sign in to comment.