Layout html grid without widows (responsive)

Layout html grid without widows (responsive)

I am trying to layout my products without having one or two widows in the
bottom row. I made a small prototype but it doesn't always work like
expected (it should always try to use the maximum width while reducing the
chance of having only 1 or 2 squares on the bottom row).
jsfiddle.net/ffuUD
function format(val) {
var decimal = val.toString().substr(val.toString().indexOf(".") + 1, 1)
if ((val <= 4 || (decimal >= 6 || isInt(val))) &&
$('.product').outerWidth(true) * val < $('body').width() ) {
return true;
} else {
return false;
}
}
function recalculate() {
for (var i = 1; i < 6; i++) {
if (format($('.product').length/i)) {
$('.products').width($('.product').outerWidth(true) *
$('.product').length/i);
break;
}
}
}
I don't really care about smaller widths but there should be a way to
reduce widows and layout the divs in the most optimal way possible. Any
tips?
expected results (try expanding the width of the jsfiddle window):
11 should be in 3 rows instead of 4
13 is a hard one too but not exactly sure.