Skip to content

Commit ff4cdbf

Browse files
SpopeSpope
committed
Merge branch 'lihaosen-222-develop'
2 parents 905f954 + 6c47360 commit ff4cdbf

4 files changed

Lines changed: 49 additions & 36 deletions

File tree

‎README.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22

33
# MiniMasonry.js
44

5-
Minimalist dependancy free Masonry layout library
5+
Minimalist dependency free Masonry layout library
66

7-
MiniMasonry is a **lightweight** dependancy free Masonry layout. It will compute elements position in Javascript and update their positions using css's **transform attribute**. This means positioning does not trigger browser layout and **use** the device's **GPU**. This also allow css animation during element positionning.
7+
MiniMasonry is a **lightweight** dependency free Masonry layout. It will compute elements position in JavaScript and update their positions using CSS's **transform attribute**. This means positioning does not trigger browser layout and **use** the device's **GPU**. This also allows CSS animation during element positioning.
88

99
MiniMasonry is **responsive**, you give it a target width and it will adjust columns number and elements width. MiniMasonry will increase element width (until another column can fit in the layout) but will never reduce the target width.
1010

@@ -45,9 +45,9 @@ Name | Default value | Description
4545
baseWidth (int)|255|Target width of elements.
4646
container (string\|HTMLElement)|Null|Container's selector or element. **Required**
4747
gutter (int)|10|Width / height of gutter between elements. Use gutterX / gutterY to set different values.
48-
gutterX (int)|null|Width of gutter between elements. Need gutterY to works, fallback to `gutter`.
49-
gutterY (int)|null|Height of gutter between elements. Need gutterX to works, fallback to `gutter`.
50-
minify (boolean)|true|Whether or not MiniMasonry place elements on shortest column or keep exact order of list.
48+
gutterX (int)|null|Width of gutter between elements. Need gutterY to work, fallback to `gutter`.
49+
gutterY (int)|null|Height of gutter between elements. Need gutterX to work, fallback to `gutter`.
50+
minify (boolean)|true|Whether or not MiniMasonry places elements on the shortest column or keeps exact order of the list.
5151
surroundingGutter (boolean)|true|Set left gutter on first columns and right gutter on last.
5252
ultimateGutter (int)|5|Gutter applied when only 1 column can be displayed.
5353
direction (string)|"ltr"|Sorting direction, "ltr" or "rtl".

‎build/minimasonry.esm.js‎

Lines changed: 23 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ var MiniMasonry = function(conf) {
55
this._count = null;
66
this._width = 0;
77
this._removeListener = null;
8+
this._currentGutterX = null;
9+
this._currentGutterY = null;
810

911
this._resizeTimeout = null,
1012

@@ -32,10 +34,16 @@ MiniMasonry.prototype.init = function(conf) {
3234
this.conf[i] = conf[i];
3335
}
3436
}
37+
3538
if (this.conf.gutterX == null || this.conf.gutterY == null) {
3639
this.conf.gutterX = this.conf.gutterY = this.conf.gutter;
3740
}
3841

42+
this._currentGutterX = this.conf.gutterX;
43+
this._currentGutterY = this.conf.gutterY;
44+
45+
console.log(this._currentGutterX);
46+
3947
this._container = typeof this.conf.container == 'object' && this.conf.container.nodeName ?
4048
this.conf.container :
4149
document.querySelector(this.conf.container);
@@ -66,31 +74,31 @@ MiniMasonry.prototype.reset = function() {
6674

6775
if (this.getCount() == 1) {
6876
// Set ultimate gutter when only one column is displayed
69-
this.conf.gutterX = this.conf.ultimateGutter;
77+
this._currentGutterX = this.conf.ultimateGutter;
7078
// As gutters are reduced, two column may fit, forcing to 1
7179
this._count = 1;
72-
}
73-
74-
if (this._width < (this.conf.baseWidth + (2 * this.conf.gutterX))) {
80+
} else if (this._width < (this.conf.baseWidth + (2 * this._currentGutterX))) {
7581
// Remove gutter when screen is to low
76-
this.conf.gutterX = 0;
82+
this._currentGutterX = 0;
83+
} else {
84+
this._currentGutterX = this.conf.gutterX;
7785
}
7886
};
7987

8088
MiniMasonry.prototype.getCount = function() {
8189
if (this.conf.surroundingGutter) {
82-
return Math.floor((this._width - this.conf.gutterX) / (this.conf.baseWidth + this.conf.gutterX));
90+
return Math.floor((this._width - this._currentGutterX) / (this.conf.baseWidth + this._currentGutterX));
8391
}
8492

85-
return Math.floor((this._width + this.conf.gutterX) / (this.conf.baseWidth + this.conf.gutterX));
93+
return Math.floor((this._width + this._currentGutterX) / (this.conf.baseWidth + this._currentGutterX));
8694
};
8795

8896
MiniMasonry.prototype.computeWidth = function() {
8997
var width;
9098
if (this.conf.surroundingGutter) {
91-
width = ((this._width - this.conf.gutterX) / this._count) - this.conf.gutterX;
99+
width = ((this._width - this._currentGutterX) / this._count) - this._currentGutterX;
92100
} else {
93-
width = ((this._width + this.conf.gutterX) / this._count) - this.conf.gutterX;
101+
width = ((this._width + this._currentGutterX) / this._count) - this._currentGutterX;
94102
}
95103
width = Number.parseFloat(width.toFixed(2));
96104

@@ -125,13 +133,13 @@ MiniMasonry.prototype.layout = function() {
125133

126134
var startX;
127135
if (this.conf.direction == 'ltr') {
128-
startX = this.conf.surroundingGutter ? this.conf.gutterX : 0;
136+
startX = this.conf.surroundingGutter ? this._currentGutterX : 0;
129137
} else {
130-
startX = this._width - (this.conf.surroundingGutter ? this.conf.gutterX : 0);
138+
startX = this._width - (this.conf.surroundingGutter ? this._currentGutterX : 0);
131139
}
132140
if (this._count > this._sizes.length) {
133141
//If more columns than children
134-
var occupiedSpace = (this._sizes.length * (colWidth + this.conf.gutterX)) - this.conf.gutterX;
142+
var occupiedSpace = (this._sizes.length * (colWidth + this._currentGutterX)) - this._currentGutterX;
135143
if (this.conf.wedge === false) {
136144
if (this.conf.direction == 'ltr') {
137145
startX = ((this._width - occupiedSpace) / 2);
@@ -140,7 +148,7 @@ MiniMasonry.prototype.layout = function() {
140148
}
141149
} else {
142150
if (this.conf.direction == 'ltr') ; else {
143-
startX = this._width - this.conf.gutterX;
151+
startX = this._width - this._currentGutterX;
144152
}
145153
}
146154
}
@@ -151,7 +159,7 @@ MiniMasonry.prototype.layout = function() {
151159

152160
var childrenGutter = 0;
153161
if (this.conf.surroundingGutter || nextColumn != this._columns.length) {
154-
childrenGutter = this.conf.gutterX;
162+
childrenGutter = this._currentGutterX;
155163
}
156164
var x;
157165
if (this.conf.direction == 'ltr') {
@@ -167,7 +175,7 @@ MiniMasonry.prototype.layout = function() {
167175
this._columns[nextColumn] += this._sizes[index] + (this._count > 1 ? this.conf.gutterY : this.conf.ultimateGutter);//margin-bottom
168176
}
169177

170-
this._container.style.height = (this._columns[this.getLongest()] - this.conf.gutterY) + 'px';
178+
this._container.style.height = (this._columns[this.getLongest()] - this._currentGutterY) + 'px';
171179
};
172180

173181
MiniMasonry.prototype.getNextColumn = function(index) {

‎build/minimasonry.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/minimasonry.js‎

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ var MiniMasonry = function(conf) {
55
this._count = null;
66
this._width = 0;
77
this._removeListener = null;
8+
this._currentGutterX = null;
9+
this._currentGutterY = null;
810

911
this._resizeTimeout = null,
1012

@@ -32,9 +34,12 @@ MiniMasonry.prototype.init = function(conf) {
3234
this.conf[i] = conf[i];
3335
}
3436
}
37+
3538
if (this.conf.gutterX == null || this.conf.gutterY == null) {
3639
this.conf.gutterX = this.conf.gutterY = this.conf.gutter;
3740
}
41+
this._currentGutterX = this.conf.gutterX;
42+
this._currentGutterY = this.conf.gutterY;
3843

3944
this._container = typeof this.conf.container == 'object' && this.conf.container.nodeName ?
4045
this.conf.container :
@@ -66,31 +71,31 @@ MiniMasonry.prototype.reset = function() {
6671

6772
if (this.getCount() == 1) {
6873
// Set ultimate gutter when only one column is displayed
69-
this.conf.gutterX = this.conf.ultimateGutter;
74+
this._currentGutterX = this.conf.ultimateGutter;
7075
// As gutters are reduced, two column may fit, forcing to 1
7176
this._count = 1;
72-
}
73-
74-
if (this._width < (this.conf.baseWidth + (2 * this.conf.gutterX))) {
77+
} else if (this._width < (this.conf.baseWidth + (2 * this._currentGutterX))) {
7578
// Remove gutter when screen is to low
76-
this.conf.gutterX = 0;
79+
this._currentGutterX = 0;
80+
} else {
81+
this._currentGutterX = this.conf.gutterX;
7782
}
7883
};
7984

8085
MiniMasonry.prototype.getCount = function() {
8186
if (this.conf.surroundingGutter) {
82-
return Math.floor((this._width - this.conf.gutterX) / (this.conf.baseWidth + this.conf.gutterX));
87+
return Math.floor((this._width - this._currentGutterX) / (this.conf.baseWidth + this._currentGutterX));
8388
}
8489

85-
return Math.floor((this._width + this.conf.gutterX) / (this.conf.baseWidth + this.conf.gutterX));
90+
return Math.floor((this._width + this._currentGutterX) / (this.conf.baseWidth + this._currentGutterX));
8691
}
8792

8893
MiniMasonry.prototype.computeWidth = function() {
8994
var width;
9095
if (this.conf.surroundingGutter) {
91-
width = ((this._width - this.conf.gutterX) / this._count) - this.conf.gutterX;
96+
width = ((this._width - this._currentGutterX) / this._count) - this._currentGutterX;
9297
} else {
93-
width = ((this._width + this.conf.gutterX) / this._count) - this.conf.gutterX;
98+
width = ((this._width + this._currentGutterX) / this._count) - this._currentGutterX;
9499
}
95100
width = Number.parseFloat(width.toFixed(2));
96101

@@ -125,13 +130,13 @@ MiniMasonry.prototype.layout = function() {
125130

126131
var startX;
127132
if (this.conf.direction == 'ltr') {
128-
startX = this.conf.surroundingGutter ? this.conf.gutterX : 0;
133+
startX = this.conf.surroundingGutter ? this._currentGutterX : 0;
129134
} else {
130-
startX = this._width - (this.conf.surroundingGutter ? this.conf.gutterX : 0);
135+
startX = this._width - (this.conf.surroundingGutter ? this._currentGutterX : 0);
131136
}
132137
if (this._count > this._sizes.length) {
133138
//If more columns than children
134-
var occupiedSpace = (this._sizes.length * (colWidth + this.conf.gutterX)) - this.conf.gutterX;
139+
var occupiedSpace = (this._sizes.length * (colWidth + this._currentGutterX)) - this._currentGutterX;
135140
if (this.conf.wedge === false) {
136141
if (this.conf.direction == 'ltr') {
137142
startX = ((this._width - occupiedSpace) / 2);
@@ -142,7 +147,7 @@ MiniMasonry.prototype.layout = function() {
142147
if (this.conf.direction == 'ltr') {
143148
//
144149
} else {
145-
startX = this._width - this.conf.gutterX;
150+
startX = this._width - this._currentGutterX;
146151
}
147152
}
148153
}
@@ -153,7 +158,7 @@ MiniMasonry.prototype.layout = function() {
153158

154159
var childrenGutter = 0;
155160
if (this.conf.surroundingGutter || nextColumn != this._columns.length) {
156-
childrenGutter = this.conf.gutterX;
161+
childrenGutter = this._currentGutterX;
157162
}
158163
var x;
159164
if (this.conf.direction == 'ltr') {
@@ -169,7 +174,7 @@ MiniMasonry.prototype.layout = function() {
169174
this._columns[nextColumn] += this._sizes[index] + (this._count > 1 ? this.conf.gutterY : this.conf.ultimateGutter);//margin-bottom
170175
}
171176

172-
this._container.style.height = (this._columns[this.getLongest()] - this.conf.gutterY) + 'px';
177+
this._container.style.height = (this._columns[this.getLongest()] - this._currentGutterY) + 'px';
173178
};
174179

175180
MiniMasonry.prototype.getNextColumn = function(index) {

0 commit comments

Comments
 (0)