Fix for fractional container width rounding

element.clientWidth rounds the width value (see
https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth).
If the width is rounded up, then rowGrid.js overestimates how much
space it has and the last image can wrap to its own row.

This fix uses getBoundingClientRect() to get the true width of the
container. The width property of the DOMRect object wasn’t included
until IE9, so for compatibility with IE8 this fix computers the width
using the right and left properties.

Author: JonathanGuberman

Diff for: 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;