round to nearest column if over by 1px;

Fixes #427 #316
desandro · Dec 10, 2013 · d5cabef · d5cabef
1 parent 36efc00
commit d5cabef
Show file tree

Hide file tree

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

diff --git a/examples/element-sizing.html b/examples/element-sizing.html
@@ -0,0 +1,67 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+
+  <title>element sizing</title>
+
+  <link rel="stylesheet" href="examples.css" />
+  <style>
+    #container { width: 501px; }
+    .item, .grid-sizer { width: 20%; }
+    .item.w2 { width: 40%; }
+    .item.w3 { width: 60%; }
+  </style>
+</head>
+<body>
+
+  <h1>basic</h1>
+
+  <div id="container" class="container">
+    <div class="grid-sizer"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item w2 h2"></div>
+    <div class="item w2"></div>
+    <div class="item h3"></div>
+    <div class="item w3"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item w2 h4"></div>
+    <div class="item w2"></div>
+    <div class="item h5"></div>
+    <div class="item w3"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item w2 h5"></div>
+    <div class="item w2"></div>
+    <div class="item h3"></div>
+    <div class="item w3"></div>
+    <div class="item"></div>
+  </div>
+
+<script src="../bower_components/eventEmitter/EventEmitter.js"></script>
+<script src="../bower_components/eventie/eventie.js"></script>
+<script src="../bower_components/doc-ready/doc-ready.js"></script>
+<script src="../bower_components/get-style-property/get-style-property.js"></script>
+<script src="../bower_components/get-size/get-size.js"></script>
+<script src="../bower_components/jquery-bridget/jquery.bridget.js"></script>
+<script src="../bower_components/matches-selector/matches-selector.js"></script>
+<script src="../bower_components/outlayer/item.js"></script>
+<script src="../bower_components/outlayer/outlayer.js"></script>
+
+<script src="../masonry.js"></script>
+
+<script>
+docReady( function() {
+  var container = document.querySelector('#container');
+  var msnry = new Masonry( container, {
+    columnWidth: '.grid-sizer'
+  });
+});
+</script>
+
+</body>
+</html>
diff --git a/masonry.js b/masonry.js
@@ -1,5 +1,5 @@
 /*!
- * Masonry v3.1.2
+ * Masonry v3.1.3
  * Cascading grid layout library
  * http://masonry.desandro.com
  * MIT License
@@ -79,7 +79,10 @@ function masonryDefinition( Outlayer, getSize ) {
   Masonry.prototype._getItemLayoutPosition = function( item ) {
     item.getSize();
     // how many columns does this brick span
-    var colSpan = Math.ceil( item.size.outerWidth / this.columnWidth );
+    var remainder = item.size.outerWidth % this.columnWidth;
+    var mathMethod = remainder && remainder < 1 ? 'round' : 'ceil';
+    // round if off by 1 pixel, otherwise use ceil
+    var colSpan = Math[ mathMethod ]( item.size.outerWidth / this.columnWidth );
     colSpan = Math.min( colSpan, this.cols );
 
     var colGroup = this._getColGroup( colSpan );

diff --git a/test/element-sizing.js b/test/element-sizing.js
@@ -0,0 +1,25 @@
+( function() {
+
+'use strict';
+
+test( 'pixel rounding', function() {
+  var container = document.querySelector('#element-sizing');
+  var msnry = new Masonry( '#element-sizing', {
+    columnWidth: '.grid-sizer',
+    itemSelector: '.item',
+    transitionDuration: 0
+  });
+
+  var lastItem = msnry.items[3];
+
+  var containerWidth = 170;
+  while ( containerWidth < 190 ) {
+    container.style.width = containerWidth + 'px';
+    msnry.layout();
+    equal( lastItem.position.y, 0,'4th item on top row, container width = ' + containerWidth );
+    containerWidth++;
+  }
+
+});
+
+})();
diff --git a/test/index.html b/test/index.html
@@ -28,6 +28,7 @@
 <script src="fit-width.js"></script>
 <script src="empty.js"></script>
 <script src="zero-column-width.js"></script>
+<script src="element-sizing.js"></script>
 
 </head>
 <body>
@@ -121,5 +122,14 @@ <h2>zero columnWidth</h2>
     <div class="item"></div>
   </div>
 
+  <h2>Element sizing</h2>
+  <div id="element-sizing" class="container">
+    <div class="grid-sizer"></div>
+    <div class="item"></div>
+    <div class="item w2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+  </div>
+
 </body>
 </html>
diff --git a/test/tests.css b/test/tests.css
@@ -99,3 +99,14 @@ body {
 #zero-column-width .hidden {
   display: none;
 }
+
+/* ---- pixel-rounding ---- */
+
+#element-sizing {
+  width: 181px;
+}
+
+#element-sizing .item,
+#element-sizing .grid-sizer { width: 20%; }
+
+#element-sizing .item.w2 { width: 40%; }