沒有寡婦的佈局html網格（響應）

編輯只是爲了闡明我想要的：我目前的算法有點基本，併產生太多的行。我想盡可能使用盡可能少的行而不添加widows。沒有寡婦的佈局html網格（響應）

我想佈局我的產品，沒有一個或兩個寡婦在底部行。我製作了一個小型原型，但並不總是像預期的那樣工作（它應該總是儘量使用最大寬度，同時減少底行只有1或2個方格的機會）。 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; 
     } 
    } 
}

應該有降低的寡婦和以最優化的方式佈局的div的方式。有小費嗎？

的預期結果（嘗試擴大的jsfiddle窗口的寬度）：

7有一個寡婦當窗口不是很大。 3行應該是2

11,14,17,20應在3行，而不是4

13是一個很難得，但不能完全確定。

更新：如果有人知道一個更好的辦法，請回答：jsfiddle.net/ffuUD/3

來源

2013-08-27 Lorof

這是最好的，我可以這樣做：

jsfiddle.net/ffuUD/3

我只是說Math.ceil()和刪除一些不需要檢查。

它的工作原理，但可能有更乾淨的方式來實現相同的結果。

來源

2013-08-27 15:48:41 Lorof

沒有寡婦的佈局html網格（響應）

回答

相關問題