Question

我不是一个javascript的人，所以如果我做的事情还可以，我会有点失落。

我有3列div，其中包含动态内容和不同数量的子div。

我希望动态调整高度，使它们与最高列的高度相同，并且任何差异均匀分布在每个较短列的div中。这是我的意思的图像：

我已经把一些看起来很有效的非常丑陋的js混在一起......但看起来很可怕。是否有更好的方法来做这个，有人可以建议？负载似乎有点迟钝，有没有办法让它更快？

   myHeightTest = function(container){
    var listOFHeights = new Array(),
        tallestContainer = 0;
    $(container).each(function(){
      listOFHeights.push($(this).height());
    });

    //Get the tallest
    tallestContainer = Math.max.apply(null,listOFHeights);

    //check I can calculate the hieght
    console.log('tallest: ' + tallestContainer);

    adjustChildHeights = function(parent,height) {
      var countKids = 0;
      $(parent.children('.flex-item')).each(function(){
        countKids += 1;
      });
      var offset = (height/countKids);
      $(parent.children('.flex-item')).each(function(){
        $(this).css('min-height',$(this).height() + offset);
      });
    }
    //now loop through and adjust
    $(container).each(function(){
      adjustChildHeights($(this),(tallestContainer - $(this).height()));
    });

  }

    $(window).load(function() {
  myHeightTest('.myflex-col');
    });


    $(window).resize(function(){
  myHeightTest('.myflex-col');
    });

Answer 1

除非我误解了你的问题，否则我认为你可以使用flexbox轻松完成这个，不需要任何花哨的javascript。这是一个例子（我没有做任何填充或边距，所以它有点难看，但我认为它会给你这个想法。

<div id="outside">
    <div class="column">
        <div class="child">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim iaculis orci eget malesuada. Quisque auctor orci ipsum, in ornare felis volutpat ut. Integer nec laoreet ex. Sed nec feugiat erat. Vestibulum vel suscipit dui. Aenean ultricies feugiat pulvinar. Donec eu luctus lorem. Integer dapibus dolor nibh, nec aliquet velit dapibus a. Nulla accumsan, sapien eu scelerisque convallis, ligula est lobortis libero, at tincidunt justo ligula maximus elit.</p>
        </div>
        <div class="child">
            <p>Sed aliquam est hendrerit mattis vestibulum. Aliquam consectetur, sapien ut placerat ullamcorper, risus orci malesuada dolor, eu consequat eros arcu a risus. Ut congue condimentum nisi nec dignissim. Sed laoreet purus orci, sit amet vestibulum metus tempus quis. Vestibulum facilisis nibh nisl. Aenean semper pharetra sem eu ultricies. Curabitur ut velit tortor. Aliquam vel metus consectetur ante suscipit rutrum. Duis volutpat hendrerit augue, vitae pretium orci laoreet vel.</p>
        </div>
        <div class="child">
           <p>In varius dapibus felis, placerat ultricies diam condimentum id. Phasellus lobortis purus tellus, at faucibus mauris varius vitae. Vestibulum vitae lectus lectus. Praesent ut diam vitae odio tincidunt porttitor sagittis sed ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer scelerisque scelerisque tincidunt. Curabitur et magna pulvinar, auctor est eget, semper nisl.</p>
        </div>
    </div>
    <div class="column">
        <div class="child">
            <p>Pellentesque et euismod mi. Nulla id ipsum convallis lacus eleifend vehicula quis id velit. In quis tempus sem, at vulputate nisi. Aenean sit amet tempor massa. Nunc et pulvinar mauris. Nunc pellentesque leo eget massa auctor tempor. Fusce nibh magna, iaculis at massa vel, consequat sagittis nisi.
        </div>
        <div class="child">
            <p>Curabitur nec placerat ligula, sed vehicula urna. Aliquam eget convallis lacus. Aenean et lacus eu ligula mollis ornare. Proin sit amet dolor eu dolor suscipit malesuada id sed urna. Integer quam ligula, semper ac elementum a, sollicitudin non turpis. Donec varius ullamcorper lacinia. Donec placerat rutrum nulla quis porta. Aenean auctor, lorem nec elementum semper, odio leo congue enim, lobortis molestie turpis dui quis leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec nibh ante, ornare ac sapien nec, aliquet sagittis diam. Proin id pellentesque ipsum. Aenean sollicitudin condimentum metus, quis pellentesque mauris vehicula vitae. In non venenatis nulla, eget consequat arcu.</p>
        </div>
    </div>
    <div class="column">
        <div class="child">
            <p>Etiam libero magna, imperdiet sit amet tincidunt eget, tristique a mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi aliquet purus id sagittis vulputate. Phasellus dignissim egestas augue aliquet venenatis. Duis condimentum massa odio, at congue purus suscipit eget. Ut sit amet neque eget felis pretium tempus. Fusce imperdiet, ipsum quis ultrices sagittis, lorem diam mollis nisi, eget tempus nisi eros at ligula. In hac habitasse platea dictumst. Nulla iaculis sed arcu hendrerit elementum. Aenean vel mi ut sapien posuere vulputate at ut tellus. Nunc convallis, justo et placerat dictum, libero eros scelerisque dolor, eu lacinia metus magna eu tellus.</p>
        </div>
        <div class="child">
            <p>Smaller one for testing</p>
        </div>
        <div class="child"></div>
        <div class="child">
            <p>other small one</p>
        </div>
        <div class="child">
            <p>Here is something that I wrote that is not horribly long but still ong enough so you get the picture I image</p>
        </div>
    </div>
</div>

CSS：

#outside {
    display: flex;
}
.column {
    display:flex;
    flex-direction: column;

}
.child {
    background-color: aqua;
    flex-grow: 1;
}

为列display:flex创建周围的容器，并使每列成为列flex。然后通过将列项设置为flex-grow: 1，将最终占据整列。

如果你真的需要使用javascript来做这件事，你应该能够将这个CSS添加到DOM元素。

使用jquery自动调整div高度

1 个答案: