Merge pull request #21 from JonathanGuberman/fractional_container_width

Fix for fractional container width rounding

Author: brunjo

jquery.row-grid.js

@@ -11,7 +11,7 @@
         options = $.extend( {}, $.fn.rowGrid.defaults, options );
         $this.data('grid-options', options);
         layout(this, options);
-        
+
         if(options.resize) {
           $(window).on('resize.rowGrid', {container: this}, function(event) {
             layout(event.data.container, options);
@@ -20,22 +20,24 @@
       }
     });
   };
-  
+
   $.fn.rowGrid.defaults = {
     minMargin: null,
     maxMargin: null,
     resize: true,
     lastRowClass: 'last-row',
     firstItemClass: null
   };
- 
+
   function layout(container, options, items) {
     var rowWidth = 0,
         rowElems = [],
         items = jQuery.makeArray(items || container.querySelectorAll(options.itemSelector)),
         itemsSize = items.length;
     // read
-    var containerWidth = container.clientWidth-parseFloat($(container).css('padding-left'))-parseFloat($(container).css('padding-right'));
+
+    var containerBoundingRect = container.getBoundingClientRect();
+    var containerWidth = Math.floor(containerBoundingRect.right - containerBoundingRect.left)-parseFloat($(container).css('padding-left'))-parseFloat($(container).css('padding-right'));
     var itemAttrs = [];
     var theImage, w, h;
     for(var i = 0; i < itemsSize; ++i) {
@@ -49,11 +51,11 @@
       // get width and height via attribute or js value
       if (!(w = parseInt(theImage.getAttribute('width')))) {
         theImage.setAttribute('width', w = theImage.offsetWidth);
-      } 
+      }
       if (!(h = parseInt(theImage.getAttribute('height')))) {
         theImage.setAttribute('height', h = theImage.offsetHeight);
-      } 
-      
+      }
+
       itemAttrs[i] = {
         width: w,
         height: h
@@ -73,7 +75,7 @@
 
       rowWidth += itemAttrs[index].width;
       rowElems.push(items[index]);
-      
+
       // check if it is the last element
       if(index === itemsSize - 1) {
         for(var rowElemIndex = 0; rowElemIndex<rowElems.length; rowElemIndex++) {
@@ -86,8 +88,8 @@
               'height: ' + itemAttrs[index+parseInt(rowElemIndex)-rowElems.length+1].height + 'px;' +
               'margin-right:' + ((rowElemIndex < rowElems.length - 1)?options.minMargin+'px' : 0);
         }
-      }      
-      
+      }
+
       // check whether width of row is too high
       if(rowWidth + options.maxMargin * (rowElems.length - 1) > containerWidth) {
         var diff = rowWidth + options.maxMargin * (rowElems.length - 1) - containerWidth;