fallback to columnWidth = innerWidth;

Fixes #358 tick version
desandro · Jun 24, 2013 · ab600d0 · ab600d0
1 parent 32033bf
commit ab600d0
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 4 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "masonry",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "Cascading grid layout library",
   "main": "masonry.js",
   "dependencies": {

diff --git a/masonry.js b/masonry.js
@@ -1,5 +1,5 @@
 /*!
- * Masonry v3.0.0
+ * Masonry v3.0.1
  * Cascading grid layout library
  * http://masonry.desandro.com
  * MIT License
@@ -54,8 +54,14 @@ function masonryDefinition( Outlayer, getSize ) {
 
   Masonry.prototype.measureColumns = function() {
     // if columnWidth is 0, default to outerWidth of first item
-    var firstItemElem = this.items[0].element;
-    this.columnWidth = this.columnWidth || getSize( firstItemElem ).outerWidth;
+    var firstItem = this.items[0];
+    var firstItemElem = firstItem && firstItem.element;
+    if ( !this.columnWidth ) {
+      // columnWidth fall back to item of first element
+      this.columnWidth = firstItemElem ? getSize( firstItemElem ).outerWidth :
+        // or size of container
+        this.size.innerWidth;
+    }
     this.columnWidth += this.gutter;
 
     this.cols = Math.floor( ( this.size.innerWidth + this.gutter ) / this.columnWidth );

diff --git a/test/empty.js b/test/empty.js
@@ -0,0 +1,9 @@
+test( 'empty', function() {
+
+  var container = document.querySelector('#empty');
+  var msnry = new Masonry( container );
+
+  ok( true, 'empty masonry did not throw error' );
+  equal( msnry.columnWidth, getSize( container ).innerWidth, 'columnWidth = innerWidth' );
+
+});
diff --git a/test/index.html b/test/index.html
@@ -27,6 +27,7 @@
 <script src="basic-layout.js"></script>
 <script src="gutter.js"></script>
 <script src="stamp.js"></script>
+<script src="empty.js"></script>
 
 </head>
 <body>
@@ -99,5 +100,8 @@ <h2>Stamp</h2>
     <div class="item"></div>
   </div>
 
+  <h2>Empty</h2>
+  <div id="empty" class="container"></div>
+
 </body>
 </html>