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

Merge branch 'dev'

pull/27/head
David DeSandro 14 years ago
parent
b1e25b472e cbe7ca46b8
commit
176321f707
3 changed files with 104 additions and 107 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      README.mdown
  2. 155
      css/style.css
  3. 48
      jquery.isotope.js

8
README.mdown
Unescape View File

@ -23,11 +23,11 @@ You can download a zip of all the flat HTML files from [http://meta.metafizzy.co
### Via Jekyll
The documentation and demo pages are generated using [Jekyll](http://github.com/mojombo/jekyll/wiki). With Jekyll installed, you can clone this repo and start Jekyll. From Terminal:
The documentation and demo pages are generated using [Jekyll](http://github.com/mojombo/jekyll/wiki). With Jekyll installed, you can clone this repo and run Jekyll from Terminal:
$ git clone git@github.com:desandro/isotope.git
$ cd isotope/
$ jekyll --server --auto
git clone https://github.com/desandro/isotope.git
cd isotope/
jekyll --server --auto
Then view the live site at [http://localhost:4000](http://localhost:4000).

155
css/style.css
Unescape View File

@ -1,8 +1,78 @@
/* Start: Recommended Isotope styles */
/**** Isotope Filtering ****/
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
transition-property: transform, opacity;
}
/* End: Recommended Isotope styles */
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
transition-duration: 0s;
}
/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
/**** Base styles ****/
* {
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
@ -14,11 +84,6 @@ body {
color: #FFF;
}
section, nav, header, footer {
display: block;
}
h1, h2, h3, p, ul, ol, pre, dl {
margin-bottom: 1.0em;
}
@ -27,6 +92,8 @@ h1, h2, #super-list, .element, .tagline {
font-family: 'Helvetica Neue', Arial, sans-serif;
}
h1, h2, h3 { font-weight: bold; }
h1 {
font-size: 32px;
line-height: 1.1em;
@ -41,7 +108,6 @@ ul, ol {
margin-left: 1.5em;
}
a,
a code {
color: #FB4;
@ -173,58 +239,6 @@ body {
color: white;
}
/**** Isotope Filtering ****/
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
/* -o-transition-duration: 0.8s;*/
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
/* -o-transition-property: height, width;*/
transition-property: height, width;
}
/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
/* -o-transition-property: -o-transform, opacity;*/
transition-property: transform, opacity;
}
.isotope.no-transition,
.isotope.no-transition .isotope-item {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
/* -o-transition-duration: 0s;*/
transition-duration: 0s;
}
/**** Example Options ****/
#options {
@ -248,17 +262,13 @@ body {
float: left;
}
#options li {
}
#options li a {
display: inline-block;
padding: 0.4em 0.5em;
background-color: #DDD;
color: #222;
font-weight: bold;
margin-bottom: 0.2em;
text-shadow: 0 1px hsla( 0, 0%, 100%, 0.5 );
background-image: -moz-linear-gradient(-90deg,
hsla( 0, 0%, 100%, 0.5 ) ,
@ -268,7 +278,6 @@ body {
from( hsla( 0, 0%, 100%, 0.5 ) ),
to( hsla( 0, 0%, 100%, 0.0 ) )
);
margin-bottom: 0.2em;
}
#options li a:hover {
@ -333,8 +342,6 @@ body.doc {
}
.doc #content {
/* font-size: 14px;
line-height: 1.7em;*/
margin-bottom: 20px;
}
@ -443,6 +450,7 @@ body.doc {
background: hsla( 0, 0%, 75%, 0.05 );
padding: 2px 0.5em;
margin-bottom: 0.5em;
font-size: 1.15em;
}
.doc h4 {
@ -479,19 +487,11 @@ h3#options {
padding-bottom: 0;
}
.option-def dl {
/* margin-top: 1.8em;*/
/* padding-top: 0.5em;*/
/* border-top: 1px solid #333;*/
}
.option-def dl dt,
.option-def dl dd {
float: left;
padding: 0 1.2em;;
background: #161616;
/* height: 2.0em;*/
line-height: 36px;
height: 36px;
}
@ -501,12 +501,7 @@ h3#options {
background: #444;
}
.option-def dl dt {
/* font-size: 14px;*/
}
.option-def dl .option-type {
/* width: 60px;*/
font-size: 13px;
color: #AAA;
font-style: italic;

48
jquery.isotope.js
Unescape View File

@ -184,15 +184,16 @@
,
set : function( elem, name, value ) {
// unpack current transform data
var data = $( elem ).data('transform') || {},
// extend new value over current data
var $elem = $(elem),
// unpack current transform data
data = $elem.data('isoTransform') || {},
newData = {},
fnName,
transformObj = {};
// overwrite new data
// i.e. newData.scale = 0.5
newData[ name ] = value;
// extend new value over current data
$.extend( data, newData );
for ( fnName in data ) {
@ -206,13 +207,11 @@
// a couple transforms we're keeping track of, we'll do it like so
var translateFn = transformObj.translate || '',
scaleFn = transformObj.scale || '',
// sorting so translate always comes first
valueFns = translateFn + scaleFn;
// set data back in elem
$( elem ).data( 'transform', data );
// sorting so scale always comes before
value = valueFns;
$elem.data( 'isoTransform', data );
// set name to vendor specific property
elem.style[ isoTransform.transformProp ] = valueFns;
@ -597,8 +596,7 @@
// accepts atoms-to-be-laid-out to start with
layout : function( $elems, callback ) {
var layoutMode = this.options.layoutMode,
layoutMethod = '_' + layoutMode;
var layoutMode = this.options.layoutMode;
// layout logic
this[ '_' + layoutMode + 'Layout' ]( $elems );
@ -616,14 +614,10 @@
'css' : this.applyStyleFnName,
animOpts = this.options.animationOptions;
// process styleQueue
$.each( this.styleQueue, function( i, obj ){
// have to extend animation to play nice with jQuery
obj.$el[ styleFn ]( obj.style, $.extend( {}, animOpts ) );
$.each( this.styleQueue, function( i, obj ) {
obj.$el[ styleFn ]( obj.style, animOpts );
});
// clear out queue for next time
this.styleQueue = [];
@ -735,7 +729,7 @@
this.$allAtoms
.css( atomUnstyle )
.removeClass( this.options.hiddenClass );
.removeClass( this.options.hiddenClass + ' ' + this.options.itemClass );
this.element
.css({
@ -757,8 +751,11 @@
var measure = isRows ? 'rowHeight' : 'columnWidth',
size = isRows ? 'height' : 'width',
UCSize = isRows ? 'Height' : 'Width',
segments = isRows ? 'rows' : 'cols';
segments = isRows ? 'rows' : 'cols',
segmentsValue;
// i.e. this.masonry.columnWidth = this.options.masonry && this.options.masonry.columnWidth ||
// this.$allAtoms.outerWidth(true)
this[ namespace ][ measure ] = ( this.options[ namespace ] && this.options[ namespace ][ measure ] ) || this.$allAtoms[ 'outer' + UCSize ](true);
// if colW == 0, back out before divide by zero
@ -767,8 +764,9 @@
return this;
}
this[ size ] = this.element[ size ]();
this[ namespace ][ segments ] = Math.floor( this[ size ] / this[ namespace ][ measure ] );
this[ namespace ][ segments ] = Math.max( this[ namespace ][ segments ], 1 );
segmentsValue = Math.floor( this[ size ] / this[ namespace ][ measure ] );
// i.e. this.masonry.cols = ....
this[ namespace ][ segments ] = Math.max( segmentsValue, 1 );
return this;
@ -838,6 +836,7 @@
instance._masonryPlaceBrick( $this, groupCount, groupY );
}
});
return this;
},
// reset
@ -878,7 +877,7 @@
this.width = this.element.width();
var instance = this;
return $elems.each( function() {
$elems.each( function() {
var $this = $(this),
atomW = $this.outerWidth(true),
atomH = $this.outerHeight(true),
@ -899,6 +898,7 @@
instance.fitRows.x += atomW;
});
return this;
},
_fitRowsReset : function() {
@ -1048,6 +1048,7 @@
instance._masonryHorizontalPlaceBrick( $this, groupCount, groupX );
}
});
return this;
},
_masonryHorizontalReset : function() {
@ -1095,7 +1096,7 @@
_fitColumnsLayout : function( $elems ) {
var instance = this;
this.height = this.element.height();
return $elems.each( function() {
$elems.each( function() {
var $this = $(this),
atomW = $this.outerWidth(true),
atomH = $this.outerHeight(true),
@ -1116,6 +1117,7 @@
instance.fitColumns.y += atomH;
});
return this;
},
_fitColumnsGetContainerSize : function () {

Write Preview
Loading…
Cancel
Save