-
Notifications
You must be signed in to change notification settings - Fork 0
/
gvtMasonry.js
124 lines (79 loc) · 3.16 KB
/
gvtMasonry.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
(function( $ ) {
// // define funcitons
// math out the amount of columns
function getElementWidth( postContainer, containerColumns ) {
var gvtAbsoluteGridWidth = jQuery( postContainer ).width();
return Math.floor( parseInt( gvtAbsoluteGridWidth ) / parseInt( containerColumns ) );
} // getColumns()
// place elements depending on amount of columns and element height
function placeElements( container, group, columns ) {
// initialize scope variables
var gvtElementId = 0;
var gvtTotalHeight = 0;
var gvtElementWidth = getElementWidth( container, columns );
var gvtElementArray = [];
// // iterate through element group
jQuery( group ).each( function() {
// initialize scope variables
var gvtVerticalTransform = 0;
var gvtVerticalHeightArray = [];
// get horizontal position depending on amount of column
var gvtHorizontalCount = gvtElementId % columns;
var gvtHorizontalTransform = gvtHorizontalCount * parseInt( gvtElementWidth );
// do dom stuff
// add id to element
jQuery( this ).attr({
'id': 'post_' + gvtElementId,
'data-id': gvtElementId,
'data-count': gvtHorizontalCount,
});
// add element width depending on amount of columns to this element
// get the height of each element depending on its width
jQuery( this ).css( 'width', gvtElementWidth );
var gvtElementHeight = jQuery( this ).height();
// add height
jQuery( this ).attr({
'height': gvtElementHeight + 'px',
})
// // push all heights of this data count into vertical height array
jQuery.each( gvtElementArray, function( key, val ) {
var gvtHorizontalCountFilter = key % columns;
if ( gvtHorizontalCount == gvtHorizontalCountFilter ) {
gvtVerticalHeightArray.push( val );
}
});
// // iterate through vertical height array
jQuery.each( gvtVerticalHeightArray, function( key, val ) {
// sum up all heights of this data count
gvtVerticalTransform += val;
// get highest value from vertical transform + this Element
var gvtCurrentMaxHeight = parseInt( gvtVerticalTransform + gvtElementHeight);
if( gvtCurrentMaxHeight > gvtTotalHeight ) {
gvtTotalHeight = gvtCurrentMaxHeight;
// add total height to masonry container
container.css('height', parseInt( gvtTotalHeight ) );
}
});
// write horizontal an vertical transforms to element css
jQuery( this ).css({
'position' : 'absolute',
'-webkit-transform':'translate('+ gvtHorizontalTransform +'px,' + gvtVerticalTransform + 'px)',
'-moz-transform':'translate('+ gvtHorizontalTransform +'px,' + gvtVerticalTransform + 'px)',
'transform':'translate('+ gvtHorizontalTransform +'px,' + gvtVerticalTransform + 'px)'
});
// do iteration things
// push current element height into array of all elements
gvtElementArray.push( gvtElementHeight );
gvtElementId++;
});
} // placeElements()
// // jquery call
jQuery.fn.gvtMasonry = function( columnCount ) {
var postContainer = jQuery( this );
var postElements = jQuery( this ).children( 'div' );
if ( !columnCount ) {
columnCount = 3;
}
placeElements( postContainer, postElements, columnCount );
}
})( jQuery );