Javascript計算固定格長度的矩形的高度和寬度

我有一個問題，它可能比代碼更多的代數，但是在這裏。Javascript計算固定格長度的矩形的高度和寬度

我需要計算x列和y行最合適的固定比例（比如300x300像素）的股利。

換句話說，我有300像素x300像素一個div，這是n個子的div的父容器，其可以是x除以y行列。

基於用戶交互，列數和行數可以改變。在每次互動時，我需要重新計算內部面板的尺寸，以便比率（1.69）保持不變，並且panals可以最有效地利用可用空間（父div）。

我總是可以得到的列數和行數，並且可以相應地調整面板高度和寬度的CSS。

，我知道有這個簡單的代數計算，但它脫離了我，我沒有JavaScript的高手。

我曾嘗試使用jQuery各種實現方式，但我一直迷路:(我沒有要求確切的答案 - 任何指針將是有益的

任何幫助，將不勝感激

來源

2013-06-27 Darwin Tech

我認爲你正在尋找flexboxes – 2013-06-27 22:13:18

我不明白1.69是什麼。 – zkanoca

1.69是方面。 –

。這一定是你的答案：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script> 
<script> 

    $(document).ready(

    function() 
    { 
     $("#go_btn").click(

     function() 
     { 
      var height = Math.round(300/$("#h").val())-2; 
      var width = Math.round(300/$("#w").val())-2; 
      //-2 is because of allocating space for borders. 
      var div = $("<div></div>"); 

      $("#container").html(''); 

      for (i = 0; i < $("#h").val(); i++) 
      { 
       for (j = 0; j < $("#w").val(); j++) 
       { 
        $("#container").append('<div style="border:1px dotted green;text-align:center;vertical-align:center;float:left;width:' + width + 'px;height:' + height + 'px;">' + i + ' x ' + j + '</div>'); 
       } 
      } 
     }); 
    }); 

</script> 
<style> 
#container { 
    width: 300px; 
    height:300px; 
    border: 1px solid grey; 
} 


</style> 
<p>Width: 
    <input type="text" id="w" class="inp" /> 
</p> 
<p>Height: 
    <input type="text" id="h" class="inp" /> 
</p> 
<p> 
    <input type="button" value="Go" id="go_btn" /> 
</p> 
<div id="container"></div>

您可以點擊此處查看：http://jsfiddle.net/3fxDL/

來源

2013-06-27 22:34:16 zkanoca

Javascript計算固定格長度的矩形的高度和寬度

回答

相關問題