mirror of https://github.com/metafizzy/isotope
David DeSandro
14 years ago
9 changed files with 377 additions and 57 deletions
@ -0,0 +1,24 @@
|
||||
// change layout
|
||||
var isHorizontal = false; |
||||
$('#layouts a').click(function(){ |
||||
var mode = $(this).attr('href').slice(1); |
||||
wasHorizontal = isHorizontal; |
||||
isHorizontal = $(this).hasClass('horizontal'); |
||||
|
||||
if ( wasHorizontal !== isHorizontal ) { |
||||
// need to do some clean up for transitions and sizes
|
||||
var style = isHorizontal ?
|
||||
{ height: '80%', width: $demo.width() } :
|
||||
{ width: 'auto' }; |
||||
$demo.addClass('no-transition').css( style ); |
||||
setTimeout(function(){ |
||||
$demo.removeClass('no-transition').isotope({ layoutMode : mode }); |
||||
}, 100 ) |
||||
} else { |
||||
// go ahead and apply new layout
|
||||
$demo.isotope({ layoutMode : mode }); |
||||
|
||||
} |
||||
|
||||
return false; |
||||
}); |
||||
@ -0,0 +1,10 @@
|
||||
<h3>Layouts</h3> |
||||
|
||||
<ul id="layouts" class="option-set floated clearfix"> |
||||
<li><a href="#masonry" class="selected">masonry</a></li> |
||||
<li><a href="#fitRows">fitRows</a></li> |
||||
<li><a href="#cellsByRow">cellsByRow</a></li> |
||||
<li><a href="#masonryHorizontal" class="horizontal">masonryHorizontal</a></li> |
||||
<li><a href="#fitColumns" class="horizontal">fitColumns</a></li> |
||||
<li><a href="#cellsByColumn" class="horizontal">cellsByColumn</a></li> |
||||
</ul> |
||||
@ -0,0 +1,12 @@
|
||||
$('#options').find('.option-set a').click(function(){ |
||||
var $this = $(this); |
||||
|
||||
// don't proceed if already selected
|
||||
if ( $this.hasClass('selected') ) { |
||||
return; |
||||
} |
||||
|
||||
$this.parents('.option-set').find('.selected').removeClass('selected'); |
||||
$this.addClass('selected'); |
||||
|
||||
}); |
||||
@ -0,0 +1,136 @@
|
||||
--- |
||||
|
||||
title: Layouts |
||||
category: docs |
||||
layout: doc |
||||
body_class: option-def |
||||
|
||||
--- |
||||
|
||||
Isotope is versatile in that it can accommodate multiple layout modes. You can set and change the layout mode via the `layoutMode` option. |
||||
|
||||
### Example |
||||
|
||||
{% highlight javascript %} |
||||
|
||||
$('#container').isotope({ layoutMode: 'fitRows' }); |
||||
|
||||
{% endhighlight %} |
||||
|
||||
Six layout modes are built into Isotope. |
||||
|
||||
<h2 id="masonry">masonry</h2> |
||||
|
||||
masonry is the default layout mode for Isotope. Item elements are arranged intelligently within a grid. For each item element, the script calculates the next best fit for the item within the grid. |
||||
|
||||
**Options** |
||||
|
||||
<dl class="clearfix"> |
||||
<dt><code>columnWidth</code></dt> |
||||
<dd class="option-type">Integer</dd> |
||||
</dl> |
||||
|
||||
The width of one column in the grid. If no value is set for `columnWidth`, default is the width of the first item element. |
||||
|
||||
**Example** |
||||
|
||||
{% highlight javascript %} |
||||
|
||||
$('#container').isotope({ |
||||
masonry: { |
||||
columnWidth: 240 |
||||
} |
||||
}); |
||||
|
||||
{% endhighlight %} |
||||
|
||||
<h2 id="fitRows">fitRows</h2> |
||||
|
||||
Item elements are arranged into rows. Similar to what you would expect from a layout that uses `float: left` |
||||
|
||||
<h2 id="cellsByRow">cellsByRow</h2> |
||||
|
||||
A grid layout. The grid is defined by two options, `columnWidth` and `rowHeight`. |
||||
|
||||
**Options** |
||||
|
||||
<dl class="clearfix"> |
||||
<dt><code>columnWidth</code></dt> |
||||
<dd class="option-type">Integer</dd> |
||||
</dl> |
||||
<dl class="clearfix"> |
||||
<dt><code>rowHeight</code></dt> |
||||
<dd class="option-type">Integer</dd> |
||||
</dl> |
||||
|
||||
**Example** |
||||
|
||||
{% highlight javascript %} |
||||
|
||||
$('#container').isotope({ |
||||
layoutMode: 'cellsByRow', |
||||
cellsByRow: { |
||||
columnWidth: 240, |
||||
rowHeight: 360 |
||||
} |
||||
}); |
||||
|
||||
{% endhighlight %} |
||||
|
||||
<h2 id="masonryHorizontal">masonryHorizontal</h2> |
||||
|
||||
The horizontal equivalent of masonry layout. Instead of progressing top-to-bottom, masonryHorizontal layout will progress left-to-right. Item elements are arranged intelligently within a grid. For each item element, the script calculates the next best fit for the item within the grid. |
||||
|
||||
**Options** |
||||
|
||||
<dl class="clearfix"> |
||||
<dt><code>rowHeight</code></dt> |
||||
<dd class="option-type">Integer</dd> |
||||
</dl> |
||||
|
||||
The width of one column in the grid. If no value is set for `rowHeight`, default is the height of the first item element. |
||||
|
||||
**Example** |
||||
|
||||
{% highlight javascript %} |
||||
|
||||
$('#container').isotope({ |
||||
masonryHorizontal: { |
||||
rowHeight: 360 |
||||
} |
||||
}); |
||||
|
||||
{% endhighlight %} |
||||
|
||||
<h2 id="fitRows">fitColumns</h2> |
||||
|
||||
Item elements are arranged into columns. The horizontal equivalent of fitRows. Columns progress from left to right. Items within those columns are arranged top-to-bottom. |
||||
|
||||
<h2 id="cellsByRow">cellsByColumn</h2> |
||||
|
||||
A grid layout. The grid is defined by two options, `columnWidth` and `rowHeight`. The horizontal equivalent of cellsByRow. |
||||
|
||||
**Options** |
||||
|
||||
<dl class="clearfix"> |
||||
<dt><code>columnWidth</code></dt> |
||||
<dd class="option-type">Integer</dd> |
||||
</dl> |
||||
<dl class="clearfix"> |
||||
<dt><code>rowHeight</code></dt> |
||||
<dd class="option-type">Integer</dd> |
||||
</dl> |
||||
|
||||
**Example** |
||||
|
||||
{% highlight javascript %} |
||||
|
||||
$('#container').isotope({ |
||||
layoutMode: 'cellsByRow', |
||||
cellsByRow: { |
||||
columnWidth: 240, |
||||
rowHeight: 360 |
||||
} |
||||
}); |
||||
|
||||
{% endhighlight %} |
||||
@ -0,0 +1,81 @@
|
||||
--- |
||||
layout: nil |
||||
title: Layouts |
||||
category: examples |
||||
--- |
||||
<!doctype html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8" /> |
||||
<title>{{ page.title }}</title> |
||||
|
||||
<link rel="stylesheet" href="../css/style.css" type="text/css" media="screen" /> |
||||
|
||||
</head> |
||||
<body> |
||||
|
||||
<h1>{{ page.title }}</h1> |
||||
|
||||
<section id="options" class="clearfix"> |
||||
|
||||
{% include layout-options.html %} |
||||
|
||||
</section> <!-- #options --> |
||||
|
||||
<div id="demo" class="iso-container variable-sizes"> |
||||
{% for element in site.elements_ordered limit:20 %} |
||||
{% include element-partial.html %} |
||||
{% endfor %} |
||||
</div> <!-- #demo --> |
||||
|
||||
<script src="../js/jquery-1.4.4.min.js"></script> |
||||
<script src="../src/mini-modernizr.js"></script> |
||||
<script src="../src/jquery.opto-transform.js"></script> |
||||
<script src="../src/jquery.smartresize.js"></script> |
||||
<script src="../src/jquery.isotope.js"></script> |
||||
<script src="../src/jquery.ui.widget.js"></script> |
||||
<script src="../js/fake-element.js"></script> |
||||
<script> |
||||
$(function(){ |
||||
|
||||
var $demo = $('#demo'), |
||||
masonryLayout = true; |
||||
|
||||
// hacky way of adding random size classes |
||||
$demo.find('.element').each(function(){ |
||||
if ( Math.random() > 0.6 ) { |
||||
$(this).addClass('width2'); |
||||
} |
||||
if ( Math.random() > 0.6 ) { |
||||
$(this).addClass('height2'); |
||||
} |
||||
}); |
||||
|
||||
$demo.isotope({ |
||||
itemSelector : '.element', |
||||
masonry : { |
||||
columnWidth : 120 |
||||
}, |
||||
masonryHorizontal : { |
||||
rowHeight: 120 |
||||
}, |
||||
cellsByRow : { |
||||
columnWidth : 240, |
||||
rowHeight : 240 |
||||
}, |
||||
cellsByColumn : { |
||||
columnWidth : 240, |
||||
rowHeight : 240 |
||||
}, |
||||
animationEngine : $.browser.opera ? 'jquery' : 'best-available', |
||||
}); |
||||
|
||||
{% include layout-change.js %} |
||||
|
||||
{% include option-buttons.js %} |
||||
|
||||
}); |
||||
</script> |
||||
|
||||
</body> |
||||
</html> |
||||
Loading…
Reference in new issue