HTML+JQuery 均衡器条与底部/中间对齐

Question

我正在尝试构建一个非常简单的 HTML/JQuery 均衡器。我无法解决的问题是，将条形对齐到底部并扩展到顶部。

这是我的代码：

window.setInterval(function(){
  $('.eqitem').each(function(){
    $(this).height(Math.floor(Math.random() * 250) + 50 );
  });
}, 500);

.parent{
    height: 300px;
}

.eqitem{
    float: left;
    height: 0px;
    width: 10px;
    background: darkred;
    margin-right: 5px;
    -webkit-transition: height 0.5s ease-out;
    transition: height 0.5s ease-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
    <div id="eq">
        <div class="eqitem"></div>
        <div class="eqitem"></div>
        <div class="eqitem"></div>
        <div class="eqitem"></div>
        <div class="eqitem"></div>                    
    </div>
</div>

我尝试了垂直对齐、绝对和相对定位、底部属性、... 以上似乎都不起作用，甚至会导致不必要的问题。

非常感谢你们的帮助。

Answer 1

您需要混合使用相对定位和绝对定位才能将项目定位在相对定位的容器底部。

要实现你想要的，你需要这样的js：

var offset_width = 15;
var i = 0;
$('.eqitem').each(function(){
    $(this).css('left', (i*offset_width) + 'px');
  i++;
});

和这个 css:

   #eq {
      position:relative;
    display: block;
    height: 300px;
    width: 100px;
     }
    .eqitem{
        position:absolute;
        height: 0px;
        width: 10px;
        background: darkred;
        margin-right: 5px;
        -webkit-transition: height 0.5s ease-out;
        transition: height 0.5s ease-out;
        display:inline-block;

        bottom:0;
    }

请查看此处的 fiddle：https://jsfiddle.net/catbadger/pzy15m8e/1/

Answer 2

您可以使用以下方法以简单而优雅的方式实现此目的 -

#eq{
  display : flex;
  height: 300px;
}

.eqitem{
   display: inline-block;
  align-self: flex-end;
}

查看 Fiddle
查看 Browser Compatibility

HTML+JQuery 均衡器条与底部/中间对齐

HTML+JQuery Equalizer Bars aligned to bottom / middle

html

javascript

css

jquery

equalizer