如何根据某些特定条件动态调整div中元素的大小

时间:2018-09-29 18:57:27

标签: javascript jquery html css

我有一个主div(大小可以在拖动时调整大小),其中有一些子元素。

子元素的数量是动态的(计数将来自API)。

因此,在某些情况下,例如,如果子元素的值在0到50之间,则应该使用一个大小;如果在51到200之间,则子元素应该使用不同的大小,但应大于先前的0到50的范围,类似一些条件。基本上,大小应取决于子元素的值。

在调整大小时,能够获得主div的高度,但是却难以获得正确的计算结果,以使主div中的所有子元素都具有动态尺寸。

我正在努力实现这样的目标, enter image description here 在图像中,每个子元素根据值都有不同的大小,在我的情况下,div也可以通过拖动来调整大小。

主要div的代码

<div class="maindiv">
    <div class="st`enter code here`_content">
        <div class="row height_full">
          <div class="stock_value"> 

            .....

          </div>

          <div class="stock_value"> 

            ....

          </div>

          <div class="stock_value"> 

            ....

          </div>

          ...
          ...
          ...

        </div>
    </div>
  </div>

零件

    <div class="stock_value"> 

        ....

      </div>

将进入for循环,

 for(var i=0; i<sub_ele.length; i++){
      <div class="stock_value" style="width:`+w_d+`px; height:`+h_d+`px;"> 

        ....

      </div>
 }

我目前正在尝试以%的百分比给出大小,例如主div的某些百分比,

     heightsd = $(".maindiv").height();
     widthsd = $(".maindiv").width();

      if(data[data.length-1]['high'] < 0){

        w_d = widthsd * 0.2;
        h_d = heightsd * 0.2;
      }else if(data[data.length-1]['high'] > 0 && data[data.length-1]['high'] < 50){

        w_d = widthsd * 0.30;
        h_d = heightsd * 0.30;
        }else if(){ .... }
        .....

但是它没有按预期工作,它在div中造成了空白。

我不知道如何将div中的所有子元素放入特定大小。

1 个答案:

答案 0 :(得分:0)

您正在尝试在可调整大小的父div内创建具有特定大小的div。值为0到50的子代具有固定的大小,以及值为51到200的子代以此类推。由于瓦片的固定大小,您在调整大小时在网格中创建不必要的间隙时遇到了问题。是吗?

看看Masonry API,我想它可能会满足您的需求,因为它会自动将子元素放置在适当的位置。