Add fitColumns layout mode

_layouts/elements.html

@@ -117,7 +117,7 @@
       console.time('initializeMe');
       $demo.molequul({
         itemSelector : '.element',
-        layoutMode : '{{ page.layout_options limit:1 }}',
+        layoutMode : '{% for layout in page.layout_options limit:1 %}{{ layout }}{% endfor %}',
         masonry : {
           columnWidth : 120
         },

_posts/examples/2010-12-19-elements-partial-horizontal.html

@@ -3,7 +3,7 @@ title: Elements Partial Horizontal
 layout: elements
 category: examples
 body_class: horizontal
-layout_options: cellsByColumn
+layout_options: [ fitColumns, cellsByColumn ]
 ---
 
 

src/jquery.molequul.js

@@ -669,6 +669,60 @@
     }
   });
   
+  // ====================== fitColumns ======================
+  
+  $.extend( $.Molequul.prototype, {
+    
+    _fitColumnsReset : function() {
+      this.fitColumns = {
+        x : 0,
+        y : 0,
+        width : 0
+      };
+      return this;
+    },
+    
+    _fitColumnsLayout : function( $elems ) {
+      var instance = this;
+      this.height = this.element.height();
+      return $elems.each( function() {
+        var $this = $(this),
+            atomW = $this.outerWidth(true),
+            atomH = $this.outerHeight(true),
+            x, y;
+
+        if ( instance.fitColumns.y !== 0  &&  atomH + instance.fitColumns.y > instance.height ) {
+          // if this element cannot fit in the current column
+          instance.fitColumns.x = instance.fitColumns.width;
+          instance.fitColumns.y = 0;
+        } 
+
+        // position the atom
+        x = instance.fitColumns.x + instance.posLeft;
+        y = instance.fitColumns.y + instance.posTop;
+        instance._pushPosition( $this, x, y );
+
+        instance.fitColumns.width = Math.max( instance.fitColumns.x + atomW, instance.fitColumns.width );
+        instance.fitColumns.y += atomH;
+
+      });
+    },
+    
+    _fitColumnsGetContainerSize : function () {
+      return { width : this.fitColumns.width };
+    },
+    
+    _fitColumnsResize : function() {
+      return this.reLayout();
+    }
+    
+    
+  });
+  
+
+  
+  // ====================== cellsByColumn ======================
+  
   $.extend( $.Molequul.prototype, {
 
     _cellsByColumnReset : function() {
@@ -709,6 +763,9 @@
     }
   });
   
+  
+
+