playground
/
isotope
mirror of https://github.com/metafizzy/isotope
1
0
Fork 0
Code Issues Releases Activity
Browse Source

js : use $.extend methods for masonry & clearFloat layouts

pull/14/head
David DeSandro 14 years ago
parent
073589f250
commit
8f1c60f622
1 changed files with 124 additions and 117 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 231
      src/jquery.ionize.js

231
src/jquery.ionize.js
Unescape View File

@ -477,144 +477,151 @@
// ====================== Masonry ====================== // ====================== Masonry ======================
$.Ionizer.prototype._masonryPlaceBrick = function( $brick, setCount, setY ) { $.extend( $.Ionizer.prototype, {
// here, `this` refers to a child element or "brick"
// get the minimum Y value from the columns _masonryPlaceBrick : function( $brick, setCount, setY ) {
var minimumY = Math.min.apply( Math, setY ), // here, `this` refers to a child element or "brick"
setHeight = minimumY + $brick.outerHeight(true), // get the minimum Y value from the columns
i = setY.length, var minimumY = Math.min.apply( Math, setY ),
shortCol = i, setHeight = minimumY + $brick.outerHeight(true),
setSpan = this.masonry.cols + 1 - i, i = setY.length,
x, y ; shortCol = i,
// Which column has the minY value, closest to the left setSpan = this.masonry.cols + 1 - i,
while (i--) { x, y ;
if ( setY[i] === minimumY ) { // Which column has the minY value, closest to the left
shortCol = i; while (i--) {
if ( setY[i] === minimumY ) {
shortCol = i;
}
} }
}
// position the brick // position the brick
x = this.masonry.columnWidth * shortCol + this.posLeft; x = this.masonry.columnWidth * shortCol + this.posLeft;
y = minimumY; y = minimumY;
this._pushPosition( $brick, x, y ); this._pushPosition( $brick, x, y );
// apply setHeight to necessary columns // apply setHeight to necessary columns
for ( i=0; i < setSpan; i++ ) { for ( i=0; i < setSpan; i++ ) {
this.masonry.colYs[ shortCol + i ] = setHeight; this.masonry.colYs[ shortCol + i ] = setHeight;
} }
}; },
$.Ionizer.prototype._masonryLayout = function( $elems ) { _masonryLayout : function( $elems ) {
var instance = this; var instance = this;
$elems.each(function(){ $elems.each(function(){
var $this = $(this), var $this = $(this),
//how many columns does this brick span //how many columns does this brick span
colSpan = Math.ceil( $this.outerWidth(true) / instance.masonry.columnWidth ); colSpan = Math.ceil( $this.outerWidth(true) / instance.masonry.columnWidth );
colSpan = Math.min( colSpan, instance.masonry.cols ); colSpan = Math.min( colSpan, instance.masonry.cols );
if ( colSpan === 1 ) { if ( colSpan === 1 ) {
// if brick spans only one column, just like singleMode // if brick spans only one column, just like singleMode
instance._masonryPlaceBrick( $this, instance.masonry.cols, instance.masonry.colYs ); instance._masonryPlaceBrick( $this, instance.masonry.cols, instance.masonry.colYs );
} else { } else {
// brick spans more than one column // brick spans more than one column
// how many different places could this brick fit horizontally // how many different places could this brick fit horizontally
var groupCount = instance.masonry.cols + 1 - colSpan, var groupCount = instance.masonry.cols + 1 - colSpan,
groupY = [], groupY = [],
groupColY; groupColY;
// for each group potential horizontal position // for each group potential horizontal position
for ( var i=0; i < groupCount; i++ ) { for ( var i=0; i < groupCount; i++ ) {
// make an array of colY values for that one group // make an array of colY values for that one group
groupColY = instance.masonry.colYs.slice( i, i+colSpan ); groupColY = instance.masonry.colYs.slice( i, i+colSpan );
// and get the max value of the array // and get the max value of the array
groupY[i] = Math.max.apply( Math, groupColY ); groupY[i] = Math.max.apply( Math, groupColY );
}
instance._masonryPlaceBrick( $this, groupCount, groupY );
} }
});
};
instance._masonryPlaceBrick( $this, groupCount, groupY ); // reset
_masonryReset : function() {
// layout-specific props
this.masonry = {};
// FIXME shouldn't have to call this again
this._getSegments('masonry');
var i = this.masonry.cols;
this.masonry.colYs = [];
while (i--) {
this.masonry.colYs.push( this.posTop );
} }
}); return this;
}; },
// reset
$.Ionizer.prototype._masonryReset = function() {
// layout-specific props
this.masonry = {};
// FIXME shouldn't have to call this again
this._getSegments('masonry');
var i = this.masonry.cols;
this.masonry.colYs = [];
while (i--) {
this.masonry.colYs.push( this.posTop );
}
return this;
};
_masonryResize : function() {
var prevColCount = this.masonry.cols;
// get updated colCount
this._getSegments('masonry');
if ( this.masonry.cols !== prevColCount ) {
// if column count has changed, do a new column cound
this.reLayout();
}
$.Ionizer.prototype._masonryResize = function() { return this;
var prevColCount = this.masonry.cols; },
// get updated colCount
this._getSegments('masonry'); _masonryGetContainerSize : function() {
if ( this.masonry.cols !== prevColCount ) { var containerHeight = Math.max.apply( Math, this.masonry.colYs ) - this.posTop;
// if column count has changed, do a new column cound return { height: containerHeight };
this.reLayout();
} }
return this; });
};
$.Ionizer.prototype._masonryGetContainerSize = function() { // ====================== clearFloat ======================
var containerHeight = Math.max.apply( Math, this.masonry.colYs ) - this.posTop;
return { height: containerHeight };
};
$.extend( $.Ionizer.prototype, {
// ====================== clearFloat ====================== _clearFloatLayout : function( $elems ) {
var instance = this;
return $elems.each( function() {
var $this = $(this),
atomW = $this.outerWidth(true),
atomH = $this.outerHeight(true),
x, y;
$.Ionizer.prototype._clearFloatLayout = function( $elems ) { if ( instance.clearFloat.x !== 0 && atomW + instance.clearFloat.x > instance.width ) {
var instance = this; // if this element cannot fit in the current row
return $elems.each( function() { instance.clearFloat.x = 0;
var $this = $(this), instance.clearFloat.y = instance.clearFloat.height;
atomW = $this.outerWidth(true), }
atomH = $this.outerHeight(true),
x, y;
if ( instance.clearFloat.x !== 0 && atomW + instance.clearFloat.x > instance.width ) {
// if this element cannot fit in the current row
instance.clearFloat.x = 0;
instance.clearFloat.y = instance.clearFloat.height;
}
// position the atom // position the atom
x = instance.clearFloat.x + instance.posLeft; x = instance.clearFloat.x + instance.posLeft;
y = instance.clearFloat.y + instance.posTop; y = instance.clearFloat.y + instance.posTop;
instance._pushPosition( $this, x, y ); instance._pushPosition( $this, x, y );
instance.clearFloat.height = Math.max( instance.clearFloat.y + atomH, instance.clearFloat.height ); instance.clearFloat.height = Math.max( instance.clearFloat.y + atomH, instance.clearFloat.height );
instance.clearFloat.x += atomW; instance.clearFloat.x += atomW;
}); });
}; },
$.Ionizer.prototype._clearFloatReset = function() { _clearFloatReset : function() {
this.clearFloat = { this.clearFloat = {
x : 0, x : 0,
y : 0, y : 0,
height : 0 height : 0
}; };
return this; return this;
}; },
$.Ionizer.prototype._clearFloatGetContainerSize = function () { _clearFloatGetContainerSize : function () {
return { height : this.clearFloat.height }; return { height : this.clearFloat.height };
}; },
$.Ionizer.prototype._clearFloatResize = function() { _clearFloatResize : function() {
this.width = this.element.width(); this.width = this.element.width();
return this.reLayout() return this.reLayout()
}; }
});
// ====================== cellsByRow ====================== // ====================== cellsByRow ======================

Write Preview
Loading…
Cancel
Save