diff -r 000000000000 -r d970ebf37754 enmi12/glossaire/_posts/docs/2010-12-05-layout-modes.mdown
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/enmi12/glossaire/_posts/docs/2010-12-05-layout-modes.mdown Wed Nov 06 03:21:17 2013 +0000
@@ -0,0 +1,191 @@
+---
+
+title: Layout modes
+category: docs
+layout: default
+body_class: option-def
+toc:
+ - { title: Horizontal layouts, anchor: horizontal_layouts }
+ - { title: cellsByColumn, anchor: cellsbycolumn }
+ - { title: cellsByRow, anchor: cellsbyrow }
+ - { title: fitColumns, anchor: fitcolumns }
+ - { title: fitRows, anchor: fitrows }
+ - { title: masonry, anchor: masonry }
+ - { title: masonryHorizontal, anchor: masonryhorizontal }
+ - { title: straightAcross, anchor: straightacross }
+ - { title: straightDown, anchor: straightdown }
+ - { title: Modified layout modes, anchor: modified_layout_modes }
+
+---
+
+Isotope has a versatile layout engine that can accommodate multiple layout modes. You can set and change the layout mode via the `layoutMode` option.
+
+[**See Demo: Layout modes**](../demos/layout-modes.html)
+
+### Example
+
+{% highlight javascript %}
+
+$('#container').isotope({ layoutMode : 'fitRows' });
+
+{% endhighlight %}
+
+Several layout modes are built into Isotope.
+
+### Horizontal layouts
+
+Horizontal layout modes (masonryHorizontal, fitColumns, cellsByColumn, and straightAcross) need a container that has a height value. Be sure that your CSS has height set.
+
+{% highlight css %}
+
+#container {
+ /* either of these will work for horizontal Isotope layouts */
+ height: 80%;
+ height: 480px;
+}
+
+{% endhighlight %}
+
+## cellsByColumn
+
+A **horizontal** grid layout where items are centered inside each cell. The grid is defined by two options, `columnWidth` and `rowHeight`. The horizontal equivalent of cellsByRow.
+
+### Options {#cellsByColumn-options}
+
+
+ columnWidth- Integer
+
+
+ rowHeight- Integer
+
+
+### Example {#cellsByColumn-example}
+
+{% highlight javascript %}
+
+$('#container').isotope({
+ layoutMode: 'cellsByColumn',
+ cellsByRow: {
+ columnWidth: 240,
+ rowHeight: 360
+ }
+});
+
+{% endhighlight %}
+
+
+## cellsByRow
+
+A **vertical** grid layout where items are centered inside each cell. The grid is defined by two options, `columnWidth` and `rowHeight`.
+
+### Options {#cellsByRow-options}
+
+
+ columnWidth- Integer
+
+
+ rowHeight- Integer
+
+
+### Example {#cellsByRow-example}
+
+{% highlight javascript %}
+
+$('#container').isotope({
+ layoutMode: 'cellsByRow',
+ cellsByRow: {
+ columnWidth: 240,
+ rowHeight: 360
+ }
+});
+
+{% endhighlight %}
+
+## fitColumns
+
+Item elements are arranged into columns. Columns progress **horizontally** from left to right. Items within those columns are arranged top-to-bottom. The horizontal equivalent of fitRows.
+
+## fitRows
+
+Item elements are arranged into rows. Rows progress **vertically** top to bottom. Similar to what you would expect from a layout that uses `float: left`.
+
+## masonry
+
+Masonry is the default layout mode for Isotope. Item elements are arranged intelligently within a **vertical** grid. For each item element, the script calculates the next best fit for the item within the grid.
+
+### Options {#masonry-options}
+
+
+ columnWidth- Integer
+
+
+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 {#masonry-example}
+
+{% highlight javascript %}
+
+$('#container').isotope({
+ masonry: {
+ columnWidth: 240
+ }
+});
+
+{% endhighlight %}
+
+
+## masonryHorizontal
+
+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 {#masonryHorizontal-options}
+
+
+ rowHeight- Integer
+
+
+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 {#masonryHorizontal-example}
+
+{% highlight javascript %}
+
+$('#container').isotope({
+ masonryHorizontal: {
+ rowHeight: 360
+ }
+});
+
+{% endhighlight %}
+
+## straightAcross
+
+Item elements are arranged **horizontally** left to right. Useful for simple lists.
+
+## straightDown
+
+Item elements are arranged **vertically** top to bottom. Useful for simple lists.
+
+## Modified layout modes
+
+[Isotope's methods can be extended and overwritten](extending-isotope.html) to shim-in additional functionality. See these modified layout modes:
+
++ [**Centered masonry**](../custom-layout-modes/centered-masonry.html)
++ [**Masonry corner stamp**](../custom-layout-modes/masonry-corner-stamp.html)
++ [**Masonry gutters**](../custom-layout-modes/masonry-gutters.html)
+
+To use these mods, copy the revised methods found in the demos' page source. They look like:
+
+{% highlight javascript %}
+
+$.Isotope.prototype._masonryReset = function() {
+ // modified code..
+};
+
+{% endhighlight %}